获取将用于页面渲染的数据的 React 最佳实践是什么？

IT技术 reactjs
2021-04-26 02:16:25

我需要获取将用于我正在呈现的页面的数据。我目前正在 useEffect 挂钩中获取数据。我不认为在渲染中使用数据之前所有数据都已加载。当我尝试在芯片标签中使用它时，它给了我一个错误“未定义的财产姓氏”。

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

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 (...
3个回答

您遍历一个teamPlayers数组并一次添加一个，每次更新状态，但players始终相同，因此您实际上不会将它们添加到除最后一个之外的状态newPlayer。

兑换

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

到

setPlayers(prevPlayers => [...prevPlayers, ...teamPlayers]);

使用功能状态更新将所有新玩家添加到之前的玩家列表中。

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

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

在渲染内容之前，您应该始终创建空检查或加载。因为最初那个键不存在。例如

<Chip
  variant="outlined"
  size="small"
  label={players.length > 0 && 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;

如果这个组件被渲染，控制台上会发生什么？

在此处输入图片说明

如您所见，组件在状态初始化之前被渲染。

在你的情况下，发生错误的原因players[1]是undefined在第一渲染。

修复错误的简单方法，只需添加空检查或像players[1]?.lastName.

其它你可能感兴趣的问题
上一篇鲍登管堵塞 下一篇使用 Marlin 固件时，是否可以在插入 SD 卡时自动运行 G 代码脚本？