Showing data from an array of objects on React component : TypeError: data.map is not a function

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([]);

此外，我建议创建一个 returns 计算 finalTeamData 的函数，并使用 setFinalTeamData.

设置该值

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

这样您的默认值将是计算的团队。您可能还想考虑何时更新 finalTeamData.

根据它的频率或值是否发生变化，您可以查看 useEffect 来更新它。

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

更新

再次查看代码后，这段代码与我有关：

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

Showing data from an array of objects on React component : TypeError: data.map is not a function

Showing data from an array of objects on React component : TypeError: data.map is not a function

javascript

dictionary

typeerror

reactjs

更新