Array.length在数据加载时未定义，导致使用钩子进行反应时出错

Question

我是新手做出反应（并尝试使用Hooks）。我正在加载用户数据并循环遍历它以创建这些用户的仪表板列表。当我尝试添加一个返回与用户关联的项目数的徽章时，user.tasks.length被认为是未定义的，从而导致错误。

如果删除.length，则客户端名称将成功呈现。所以我假设初始数据是未定义的。我可以console.log user.tasks，所以它确实加载。我设置了一个带有（typeof user.tasks！=='undefined'）的徽章处理程序，但这在数据加载后不重新渲染，只返回else结果（null）？

我的数据如下：

ListOfTeam.users = [
{ _id: objectId,
  firstName: string,
  tasks: [array of strings]
]

我认为useEffect重新呈现整个DOM，因此会重新呈现此组件列表。一旦数据加载，初始运行错误是否会破坏任何重新渲染？ badgeHandler是错误的思考方式吗？

const Dashboard4 = () => {
    const [user, setUser] = useState({})
    const [ListOfTeam, setListOfTeam] = useState({ users: [] })

    useEffect(() => {
        axios.get('http://localhost:3001/api/users/me')
            .then(res => {
                setUser({ user: res.data })
            });

    }, [])

     useEffect(() => {
        const fetchData = async () => {
        const result = await 
                   axios.get('http://localhost:3001/api/users/userlist/',
            );
            setListOfTeam(result.data)
        }
        fetchData();
    }, [user]);

     const handleBadge = () => {
        if (typeof user.tasks !== 'undefined') {
            return user.tasks.length;
        } else {
            return null
        }
    }

return (
<div> 
  <List>
    {ListOfTeam.users.map(user => {
            return ( 
            <div key={user._id}>
                <Badge badgeContent={handleBadge()} color="primary">
                  <ListItem button >
                     <ListItemIcon>
                       <PeopleIcon />
                        </ListItemIcon>
                     <ListItemText primary={user.firstName} />
                  </ListItem>
                 </Badge>
              </div>);})}
   </List>
</div> 

Answer 1

看起来它试图在axios请求完成之前打印值，这是数据分配发生的地方。否则，要检查一些事项：

A）什么是axios请求返回？你确定那里有任务属性吗？

B）徽章徽章Content = {handle Badge（）}的目的是什么？请记住，此处返回的是数字或null，而不是用户数据。

C）对于handleBadge检查，而不是检查类型是否未定义，您应该检查它本身是未定义还是空。所以我会改为：

if (!user.tasks) {
    return null;
} else {
    return user.tasks.length;
}

Answer 2

不太熟悉React钩子，但它们应该类似于老式的反应。

在我看来，你的异步/等待都是混乱的，使用promises和async / await看起来并不正确。

只需重写你的效果函数：

  useEffect(async () => {
    const result = await axios.get('http://localhost:3001/api/users/me');
    setUser({ user: result.data });
  }, [])

   useEffect(async () => {
    const result = await axios.get('http://localhost:3001/api/users/userlist/');
    setListOfTeam(result.data);
  }, [user]);

看看这是否能解决您的问题。