在 React 组件上显示对象数组中的数据：TypeError：data.map 不是函数

Question

我这几天一直在尝试解决这个问题，看来解决方案应该就在我面前。但似乎没有什么对我有用。这是我的第一个 React 应用程序，所以可以完全关闭......：D

我有这个数据

const teamNames = ['Sort', 'Gul', 'Blå', 'Rød', 'Orange',  'Grøn']
let [finalTeamData, setFinalTeamData] = useState()

在我的函数中，我喜欢这样做，首先重置数据，然后构建它。

  function makeTeams () {
    const playersParticipating = []
    let howManyTeams = 0
    const teams = []
    setFinalTeamData(finalTeamData = [])

    // Get the players who is participating
    for (let i = 0; i < players.length; i++) {
      if (players[i].participating) {
        playersParticipating.push(players[i].name)
      }
    }
    
    // Find the number of players pr team.
    howManyTeams = playersParticipating.length / parseInt(teamsize)    
    
    // Divide the players out on each team randomly
    // Taking 1 team at a time
    for (let i = 0; i < howManyTeams; i++) {      
      teams[i] = []
      for (let y = 0; y < teamsize; y++) {
        let number = Math.floor(Math.random() * playersParticipating.length)
        teams[i].push(playersParticipating[number])
        playersParticipating.splice(number, 1)   
      }
    }
    console.log(teams)
    setShowteams(true)
    for (let i = 0; i < teams.length; i++) {
      setFinalTeamData(finalTeamData[i] =
        {
          id: i,
          teamname: teamNames[i],
          players: teams[i]
        }
      )

    }
    console.log(finalTeamData)
  }

在此处将其传递到我的组件中

<ShowTeams data={finalTeamData} />

最后是我的组件。

const ShowTeams = ({ data }) => {

        return (
            <>
                {data.map((data) => { return <h1>{data.teamname}</h1>;})}
            </>
    )
}

export default ShowTeams

但无论我如何尝试，我都会不断收到此错误：TypeError: data.map is not a function

我如何可能浏览我的数据并显示组件上的每个对象？

据我所见，它应该是一个数组，并且在浏览器控制台中看起来是正确的。希望有人有时间看看。

Answer 1

这是因为finalTeamData 的默认值是undefined。当您使用useState 时，设置默认值很重要，尤其是当您不检查就立即访问它时。

原因：

在组件的初始渲染中，finalTeamData 将是 undefined，即使您在渲染之前运行 makeTeam。在渲染获得更新值之前需要另一个周期。

解决方案：

const [finalTeamData, setFinalTeamData] = useState([]);

另外，我建议创建一个函数来返回计算得到的finalTeamData，并使用setFinalTeamData 设置该值。

const makeTeam = () => {
  ...calculate
  return teamData
}
const [finalTeamData, setFinalTeamData] = useState(makeTeam());

这样，您的默认值将是计算出的团队。当您想要更新finalTeamData 时，您可能还需要考虑。

根据更改频率或值是否更改，您可以查看useEffect 进行更新。

https://reactjs.org/docs/hooks-effect.html

更新

再次查看代码后，这个sn-p让我很担心：

setFinalTeamData(finalTeamData[i] =
  {
    id: I,
    teamname: teamNames[i],
    players: teams[i]
  }
);

您不想直接修改状态值，而是想使用 setter 函数。您的默认值是一个数组，因此我将其修改为：

const teamData = [];

for (let i = 0; i < teams.length; i++) {
  teamData.push({
    id: i,
    teamname: teamNames[i],
    players: teams[i]
  });
}

setFinalTeamData(teamData);

你也不需要这一行：

setFinalTeamData(finalTeamData = [])

https://dev.to/koralarts/react-usestate-5h75