如何使用setState动态更新React对象状态中的指定字段？

当然可以，不需要提前知晓keysToUpdate数组的具体内容，完全可以动态生成更新后的对象，再通过setData完成状态更新。

实现方案 #

方案一：使用Object.fromEntries（简洁高效）

利用Object.fromEntries将键数组和值数组配对成键值对对象，再与原状态对象合并：

// 生成待更新的键值对对象
const updatedFields = Object.fromEntries(
  keysToUpdate.map((key, index) => [key, newValues[index]])
);

// 函数式更新状态，确保依赖最新的前一次状态
setData(prevData => ({ ...prevData, ...updatedFields }));

方案二：循环构建更新对象（兼容旧环境）

如果运行环境不支持Object.fromEntries，可以通过循环手动构建待更新对象：

const updatedFields = {};
for (let i = 0; i < keysToUpdate.length; i++) {
  const key = keysToUpdate[i];
  updatedFields[key] = newValues[i];
}

setData(prevData => ({ ...prevData, ...updatedFields }));

注意事项 #

• 需保证keysToUpdate和newValues的长度一致，避免出现键值不匹配的问题，可添加前置校验：

  if (keysToUpdate.length !== newValues.length) {
    console.error("键数组与值数组长度不匹配");
    return;
  }
  

• 使用函数式更新（prevData => ...）而非直接展开data，能避免因状态异步更新导致的旧值覆盖问题。

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