Question

我是新来的反应者（并尝试使用Hooks）。我正在加载用户数据并遍历它，以创建这些用户的仪表板列表。当我尝试添加返回与用户关联的项目数的徽章时，据说user.tasks.length是未定义的，因此会导致错误。

如果删除.length，则客户端名称将成功呈现。因此，我认为初始数据是不确定的。我可以console.log user.tasks，所以它确实可以加载。我使用（typeof user.tasks！=='undefined'）设置了徽章处理程序，但是在加载数据后它不会重新呈现，而仅返回else结果（空）？

我的数据如下：

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请求返回什么？您确定其中有一个task属性吗？

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

C）至于handleBadge检查，而不是检查类型是否未定义，应检查它本身是未定义还是为空。所以我将其更改为：

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

Answer 2

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

您认为您的异步/唤醒都杂乱无章，同时使用诺言和异步/等待看起来并不正确。

只需重写您的效果功能：

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

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

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

2 个答案: