React中如何设置数组指定记录为默认选中并解决代码不生效问题

你的代码存在3个核心错误，导致默认选中逻辑不生效：

• 数据访问路径错误：数组每一项是{ country: { id: xxx, ... } }的嵌套结构，id属性存放在country字段下，原代码直接读取顶层obj.id永远得到undefined，根本匹配不到id=5的目标记录。
• 属性赋值层级错误：原代码直接给顶层对象设置status属性，没有修改country对象内部的status字段，后续渲染读取country.status时永远拿到初始空值。
• 违反React不可变更新原则：map遍历时直接执行obj.status = ""修改原始数据引用，会导致React状态变更检测失效，就算属性值修改正确也可能不触发视图重渲染。

const [busiData, setBusiData] = useState(data);

const getDefaultId = () => {
  const newState = busiData.map(item => {
    // 拷贝嵌套的country对象，避免直接修改原数据
    const updatedCountry = { ...item.country, status: "" };
    // 正确访问country下的id做匹配
    if (updatedCountry.id === 5) {
      updatedCountry.status = "active";
    }
    // 返回全新的顶层对象，保证不可变更新
    return { ...item, country: updatedCountry };
  })
  setBusiData(newState);
}

useEffect(() => {
  getDefaultId()
}, [])

如果不需要挂载后动态设置默认值，可以直接在状态初始化阶段就完成默认选中处理，省掉一次额外的组件重渲染：

const [busiData, setBusiData] = useState(() => {
  return data.map(item => {
    const country = { ...item.country, status: "" };
    if (country.id === 5) country.status = "active";
    return { ...item, country };
  })
});

注意后续列表渲染时，判断激活状态要读取item.country.status === "active"，不要取错属性层级。

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