React Hooks：如何用useState将所有State值设置为某特定对象的相同值

首先直接回应你关心的两个问题：

• 完全可以在现有map遍历逻辑里完成跨对象赋值，不需要单独挪到其他位置做特殊处理
• 你现在的代码点了没反应，核心原因是map里的判断逻辑写反了

现有代码的问题点 #

你在applyAll里的map遍历，是当“当前遍历到的索引和点击按钮的索引一致”时，才返回一个和原对象完全相同的浅拷贝，其他项则原封不动返回——等于整个遍历跑完根本没修改任何字段，当然没有任何同步效果。
另外你在调用setkitchenItems之后立刻打印kitchenItems拿到旧值是正常现象：React的状态更新是异步批量执行的，刚触发更新时，当前闭包里拿到的还是更新前的旧状态引用，等组件重新渲染完成后，才能拿到最新的状态值，这不是bug。

正确的实现写法 #

要实现「点击某区块的Apply to All，把其他区块的对应字段全部同步成这个区块的值」，逻辑非常简单：

1. 在applyAll函数开头，先把点击位置对应的源数据（比如你点Fork的时候，就把Fork的size、text、value存成临时变量）取出来
2. 遍历整个kitchenItems数组时，保留每一项自己独有的name字段（不然所有餐具的名字都会被改成统一值，就分不清不同区块了），把需要同步的三个字段，全部替换成刚才存的源数据的对应值就行。

修正后的applyAll函数参考：

function applyAll(clickedIdx) {
  // 取出当前点击区块的源数据
  const sourceItem = kitchenItems[clickedIdx]
  const updatedData = kitchenItems.map((item) => {
    return {
      // 保留每个条目自身的name属性
      ...item,
      // 统一替换需要同步的字段值
      size: sourceItem.size,
      text: sourceItem.text,
      value: sourceItem.value
    }
  })
  setkitchenItems(updatedData)
  // 直接打印生成的新数组，就能看到完整的更新结果
  console.log('同步后的全量数据：', updatedData)
}

补充说明 #

• 这种写法不需要在map里单独判断哪个项是被点击的：因为我们特意保留了name的原有值，哪怕遍历到被点击的那一项，替换成和自己完全一样的字段值也不会产生异常，代码逻辑更简洁
• 现在的处理位置是最合理的：在按钮的点击回调里直接完成状态计算和更新，不需要额外抽公共逻辑或者把状态抬到上层，对当前的小型应用来说是最易维护的写法
• 小优化提示：目前你用数组索引作为列表的key，因为当前列表没有增删、排序操作，暂时不会出问题，但如果后续要给列表加动态操作，最好换成每个条目自带的唯一id作为key，避免出现渲染节点复用错误的问题。

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