React中如何在useEffect内通过useState更新对象数组的指定字段

你可以通过遍历原address数组、匹配接口返回的对应字段值来完成状态更新，具体修改如下：

首先注意你给出的模拟返回数据中，en对象下的Block键首字母为大写，和你定义的id: "block"不匹配，你可以先修正这个笔误，再添加更新逻辑：

useEffect(() => {
  // 模拟接口GET请求
  let responseData = {
    en: {
      unit: "Unit 1",
      floor: "Floor 1",
      block: "Block 1" // 修正为小写，匹配address项的id
    }
  };

  // 新增状态更新逻辑
  setAddress(prev => 
    prev.map(item => ({
      ...item,
      value: responseData.en[item.id]
    }))
  )
}, []);

如果你无法修改接口返回的字段格式，可以兼容大小写匹配：

setAddress(prev => 
  prev.map(item => {
    // 同时匹配小写和首字母大写的键
    const matchKey = Object.keys(responseData.en).find(
      key => key.toLowerCase() === item.id
    )
    return {
      ...item,
      value: responseData.en[matchKey]
    }
  })
)

上述代码执行后，address数组的值就会和你预期的最终格式完全一致。这里使用函数式更新prev的写法，可以确保拿到最新的原状态值，避免空依赖数组带来的状态过时问题。

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