Reactjs 获取用于页面呈现的数据的最佳实践是什么？

我需要获取将用于渲染的页面的数据。我目前正在useEffect挂钩中获取数据。我认为在渲染中使用数据之前，没有加载所有数据。当我尝试在芯片标签中使用它时，它给了我一个错误属性lastName未定义

我不确定应该在何处或如何处理数据收集，因为它将在呈现的整个页面中使用。我应该在应用程序功能之外收集数据吗

const App = (props) => {
  const [teams] = useState(["3800", "0200", "0325", "0610", "0750", "0810"]);
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    teams.forEach(teamId => {
      axios.defaults.headers.common['Authorization'] = authKey;

      axios.get(endPoints.roster + teamId)
        .then((response) => {
          let teamPlayers = response.data.teamPlayers;

          teamPlayers.forEach(newPlayer => {
            setPlayers(players => [...players, newPlayer]);
          })
        })
        .catch((error) => {
          console.log(error);
        })
    });
  }, []);


  let numPlayersNode =
    <Chip
      variant="outlined"
      size="small"
      label={players[1].lastName}
    />

  return (...

---

在呈现内容之前，应该始终创建空检查或加载。因为最初该密钥不存在。比如说

<Chip
  variant="outlined"
  size="small"
  label={players.length > 0 && players[1].lastName}
/>

这是一个空检查的示例

---

对于加载，请创建加载状态。

在呈现内容之前，应始终创建空检查或加载。因为最初该密钥不存在。比如说

<Chip
  variant="outlined"
  size="small"
  label={players.length > 0 && players[1].lastName}
/>

这是一个空检查的示例

为加载创建一个加载状态。

您迭代一个teamPlayers数组，一次添加一个，每次更新状态，但玩家总是相同的，因此您不会将他们添加到上一个新玩家以外的状态

皈依

teamPlayers.forEach(newPlayer => {
  setPlayers(players => [...players, newPlayer]);
});

到

将所有新玩家添加到以前使用的玩家列表中

您还有一个空数组[]的初始状态，因此在第一次渲染时，您将无法访问任何数据。您可以使用真实的检查或保护模式来防止访问。。。未定义的。。。错误

您迭代一个teamPlayers数组，一次添加一个，每次更新状态，但玩家总是相同的，因此您实际上不会将他们添加到上一个新玩家以外的状态

皈依

teamPlayers.forEach(newPlayer => {
  setPlayers(players => [...players, newPlayer]);
});

到

将所有新玩家添加到以前使用的玩家列表中

您还有一个空数组[]的初始状态，因此在第一次渲染时，您将无法访问任何数据。您可以使用真实的检查或保护模式来防止访问。。。未定义的。。。错误

---

首先呈现函数组件时，仅在返回函数后才执行useEffect

然后，如果状态在useEffect1中更改，则该组件将再次渲染。这里有一个例子

import React, {useEffect, useState} from 'react'

const A = () => {
    const [list, setList] = useState([]);
    useEffect(() => {
        console.log('useEffect');
        setList([{a : 1}, {a : 2}]);
    }, []);

    return (() => {
        console.log('return')
        return (
            <div>
                {list[0]?.a}
            </div>
        )
    })()
}

export default A;

如果呈现此组件，控制台上会发生什么

如您所见，组件在初始化状态之前呈现

在您的情况下，发生错误是因为玩家[1]在第一次渲染时未定义

---

修复错误的简单方法是，只需添加空检查或可选链接，如players[1]？.lastName。

首先呈现函数组件时，仅在返回函数后执行useEffect

然后，如果状态在useEffect1中更改，则该组件将再次渲染。这里有一个例子

import React, {useEffect, useState} from 'react'

const A = () => {
    const [list, setList] = useState([]);
    useEffect(() => {
        console.log('useEffect');
        setList([{a : 1}, {a : 2}]);
    }, []);

    return (() => {
        console.log('return')
        return (
            <div>
                {list[0]?.a}
            </div>
        )
    })()
}

export default A;

如果呈现此组件，控制台上会发生什么

如您所见，组件在初始化状态之前呈现

在您的情况下，发生错误是因为玩家[1]在第一次渲染时未定义

---

修复错误的简单方法是，只需添加空检查或可选链接，如players[1]？.lastName.

这非常有效-谢谢。我将查找功能状态更新，以便更好地理解。“真实性检查现在非常有意义。@sbaden这里是我创建的一个示例，用于帮助说明常规状态更新和功能状态更新之间的区别。非常感谢！我会检查的。我知道truthy检查是如何工作的，但是我想等到所有的数据都加载了，我不知道有多少数据。如何让代码等待？@sbaden使用数组长度，即players.length？/*渲染玩家。映射…*/：/*呈现null或一些有用的文本，可能是加载微调器*/。抱歉，语法很难在评论中阅读，请检查工作是否完美-谢谢。我将查找功能状态更新，以便更好地理解。“真实性检查现在非常有意义。@sbaden这里是我创建的一个示例，用于帮助说明常规状态更新和功能状态更新之间的区别。非常感谢！我会检查的。我知道truthy检查是如何工作的，但是我想等到所有的数据都加载了，我不知道有多少数据。如何让代码等待？@sbaden使用数组长度，即players.length？/*渲染玩家。映射…*/：/*呈现null或一些有用的文本，可能是加载微调器*/。抱歉，在评论中很难阅读语法