React使用扩展语法向state数组添加对象报错无法更新状态求助

存在的问题 #

• 泛型定义错误：你声明的[{uuid: number; id: number}]是长度固定为1的元组类型，并非任意长度的对象数组，和实际使用场景不符。
• 条件判断永远不生效：state初始值为[]，空数组和null恒不相等，整个useEffect的逻辑分支永远不会执行。
• 状态更新写法错误：在map中循环调用setId且直接引用当前state值，React状态更新是异步批量处理的，最终只会保留最后一次更新的结果，无法叠加所有元素。
• 对象语法错误：{user.uuid, user.id}是非法的对象字面量写法，没有指定属性名，语法解析直接报错。

修正后的代码 #

如果你的需求是仅初始化一次填充数组：

// 泛型改为对象数组类型
const [id, setId] = React.useState<Array<{uuid: number; id: number}>>([]);

useEffect(() => {
  // 仅当id为空数组且users存在时执行初始化
  if (id.length === 0 && users?.length) {
    // 先处理完所有数据生成最终数组，再一次性更新状态
    const newIdList = users.map(user => ({
      uuid: user.uuid,
      id: user.id
    }))
    setId(newIdList)
  }
}, [users, id]);

如果你的需求是每次users变化都追加新数据到现有数组：

const [id, setId] = React.useState<Array<{uuid: number; id: number}>>([]);

useEffect(() => {
  if (users?.length) {
    const newItems = users.map(user => ({
      uuid: user.uuid,
      id: user.id
    }))
    // 函数式更新可以拿到最新的state值，不会出现异步更新的旧值问题
    setId(prev => [...prev, ...newItems])
  }
}, [users]);

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