React中如何将GET请求返回的数据正确赋值给users变量

错误原因 #

• setPosts调用时机错误：fetch是异步API，你将状态更新逻辑写在.then链外部，会在请求还没返回响应结果时就提前执行，此时根本拿不到后端返回的数据。
• 数据处理逻辑错误：你拿到接口返回的data后仅打印了日志，没有调用状态更新函数将数据存入状态；同时你写的users.data本身不存在，初始users是你声明的空数组，没有data属性，取值自然返回undefined。
• 状态命名不规范（非必改但建议调整）：状态变量命名为users的话，对应的更新函数建议命名为setUsers，避免和其他业务状态混淆。

正确实现代码 #

// 调整更新函数命名和状态匹配，可读性更强
const [users, setUsers] = React.useState([]);

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((data) => {
      // 拿到返回数据后，在then回调内调用更新函数存数据
      setUsers(data);
      console.log('接口返回的原始数据：', data);
    });
}, []);

补充说明 #

React的状态更新是异步操作，刚调用完setUsers后立刻打印users还是旧值属于正常表现。如果要验证状态是否更新成功，可以在组件顶层直接打印users，或者新增一个依赖users的副作用监听状态变化：

useEffect(() => {
  console.log('users状态已更新为：', users);
}, [users])

内容的提问来源于stack exchange，提问作者Phat Baba