用户数组挂钩未更新所有列表项

Question

所以我正在创建一个简单的 MERN 应用程序，后端工作正常，但是在前端使用 useState 挂钩时会导致问题。我想做的是从后端端点获取“用户”数据（带有字段用户名的对象数组），并更新用户数组，这是一个钩子，但它只更新传入用户名的最后一个 itm 而不是列表所有用户名！！

获取和更新挂钩的代码：

const [users, setUsers] = useState([]);

const getUsers = () => {
    fetch("http://localhost:5000/users")
        .then(res => res.json())
        .then(data => {
            console.log(data);      //line 17
            data.map((itm) => {
                console.log([itm.username])      //line 19
                setUsers([...users, itm.username])
            })
        })
        .catch(err => console.log(err))
}

useEffect(() => {
    getUsers();
}, [])

console.log(users);       //line 30

我想要的是获取“users”状态下的用户名列表！是这样的： 用户 = [“蜘蛛侠”、“雷神”、“钢铁侠”、“美国队长”]

console.log 也没有显示任何错误... console window

求助，不知道哪里出错了？

Answer 1

问题有两个方面，首先您正在使用 Array.prototype.map 迭代数组但发出了无意的副作用（状态更新），其次，您正在循环中对状态更新进行排队，但使用标准更新，每个后续更新都会覆盖之前的更新，因此只有最后一个排队的更新是您在下一个渲染中看到的。

使用 .forEach 遍历 data 并使用功能状态更新从之前的状态正确更新。

const getUsers = () => {
  fetch("http://localhost:5000/users")
    .then(res => res.json())
    .then(data => {
      console.log(data);
      data.forEach((itm) => {
        console.log([itm.username]);
        setUsers(users => [...users, itm.username]);
      })
    })
    .catch(err => console.log(err));
}

或者使用 .map 并将 data 映射到要附加到 users 状态的数组。

const getUsers = () => {
  fetch("http://localhost:5000/users")
    .then(res => res.json())
    .then(data => {
      console.log(data);
      setUsers(users => users.concat(data.map(itm => itm.username)));
    })
    .catch(err => console.log(err));
}

Answer 2

您可以将地图结果设置在一个变量中，然后您可以在其上调用 useState。

 const [users, setUsers] = useState([]);

 const getUsers = () => {
   fetch("http://localhost:5000/users")
    .then(res => res.json())
    .then(data => {
        console.log(data);      //line 17
        const userNameData = data.map(itm => itm.username)
     setUsers(...users, userNameData)
    })
    .catch(err => console.log(err))
  }

 useEffect(() => {
   getUsers();
 }, [])

 console.log(users);

用户数组挂钩未更新所有列表项

users array hook is not updating with all the list items

web-frontend

reactjs

react-hooks

use-state