如何向嵌套对象数组的role属性添加或修改元素？

你的代码问题核心在于两点：一是违反了React状态的不可变更新原则，直接修改原对象无法触发组件重渲染；二是数组方法的使用逻辑错误，导致操作没作用在目标数据上。

1. 向每个对象的role数组添加元素 #

必须通过setInitialValues更新状态，同时创建新的数组和对象，不能直接修改原数据：

setInitialValues(prev => 
  prev.map(item => ({
    ...item, // 拷贝原对象的其他属性
    role: [...item.role, { init: "test", lang: "TR" }] // 拷贝原role数组并追加新元素
  }))
);

关键说明 #

• 用prev获取当前最新的state值，避免闭包导致的状态滞后问题
• map返回全新数组，每个元素是原对象的拷贝，仅更新role为新数组（原数组+新元素）

2. 找到匹配条件的元素并修改其role中的值 #

假设你要匹配item的addPrivs属性等于name，再修改该item下role中lang等于activeLang的元素的init值：

setInitialValues(prev => 
  prev.map(item => {
    if (item.addPrivs === name) {
      return {
        ...item,
        role: item.role.map(roleItem => 
          roleItem.lang === activeLang 
            ? { ...roleItem, init: value } // 匹配到则拷贝并修改init
            : roleItem // 未匹配则直接返回原对象
        )
      };
    }
    return item; // 非目标对象直接返回
  })
);

关键说明 #

• 全程基于prev更新，保证拿到最新状态
• 外层map遍历所有IInitialValues对象，找到目标后，内层map遍历其role数组做精准修改
• 所有修改都通过创建新对象/数组实现，严格遵循React不可变状态原则

原代码失效原因 #

• 第一个写法：initialValues.map(item => item.role).push(...)——map返回的是由所有role数组组成的新数组，你给这个新数组push元素，但原initialValues里的role根本没变化，也没调用setInitialValues更新状态，等于无效操作。
• 第二个写法：map(item => item === name)把原数组转成了布尔值数组，后续filter处理的是布尔值，自然不存在lang属性；同时直接修改原对象不会触发组件重渲染，也没更新state。

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