React中使用useState存储多值的正确方式及问题排查

1. useState中用对象存储多数据是否合适？ #

完全合适。当多个状态属于同一实体（比如用户的姓名、电话、部门这类关联信息），用对象把它们聚合在一起管理，比拆成多个独立的useState更整洁，也更符合数据的逻辑关联。后续修改或传递这些数据时，操作起来也更方便。

2. 当前代码的错误及修复 #

错误原因 #

setUser作为useState的更新函数，只接受一个参数（即新的state值）。你现在传了四个参数，它只会读取第一个参数作为新的state，所以最后只有first_name被存了进去，其他字段都被忽略了。

修复代码 #

修改fetchData里的setUser调用，传入包含所有字段的对象，同时注意字段名和初始state的对应（比如初始state里的dep要对应API返回的department）：

function ShowUser () {
  const url = 'http://localhost:3001/showUser'
  const [user, setUser] = useState({
    first_name: "",
    last_name: "",
    tel_number: "",
    dep: ""
  });

  async function fetchData(){
    let response = await fetch(url)
    const x = await response.json();

    // 正确写法：传入完整对象
    setUser({
      first_name: x[0].first_name,
      last_name: x[0].last_name,
      tel_number: x[0].tel_number,
      dep: x[0].department // 注意字段名对应初始state的dep
    }) 
  }

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetchData();
    return () => {
      console.log("cancelled!")
      controller.abort();   
    }; 
  }, [])

  // 可在此打印更新后的user，或用useEffect监听
  console.log(user);
  return (
    <div>
      {/* 渲染用户信息 */}
      <p>{user.first_name} {user.last_name}</p>
      <p>电话：{user.tel_number}</p>
      <p>部门：{user.dep}</p>
    </div>
  )
}

额外提示 #

调用setUser后立刻console.log(user)可能看不到最新值，因为useState的更新是异步的。如果要查看更新后的user，要么在组件渲染阶段打印（如上面代码的位置），要么用useEffect监听user的变化：

useEffect(() => {
  console.log("更新后的user:", user);
}, [user])

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