接收 object 数组时更新反应 state

Question

我正在使用 axios.get 打电话给我的 MongoDB。 我对数据库的响应是一个包含数据库中所有数据的对象数组。 我只是想将每个用户的用户名保存到 state。 我正在尝试将响应（res.data.username）设置为我的 state 但是当我记录我的 state 时，我得到了一个空数组。 PS：没有办法复制我的回复，所以我添加了回复的图片以供参考，如果有更好的方法来显示回复，请告诉我

const [users, setUsers] = useState([]);
useEffect(() => {
    axios.get('http://localhost:5000/users')
    .then(res => {
        if (res.data.length > 0) {
            console.log(res.data)
            setUsers(user => [...user, res.data.username]);
        }
    })
    
}, [])

Answer 1

res.data 是一个数组。 只需从响应中设置用户名，您可以尝试

setUsers(user => [...user, res.data.map(response => response.username)]); 

Answer 2

由于users是一个数组，因此将数组传递给setUsers 。 使用解构来提高可读性和简化性。

const [users, setUsers] = useState([]);
useEffect(() => {
  axios.get("http://localhost:5000/users").then((res) => {
    if (res.data.length > 0) {
      console.log(res.data);
      setUsers(res.data.map(({ username }) => username));
    }
  });
}, []);

Answer 3

setUsers(res.data.map(({ username }) => username));