React中如何更新对象数组孙级元素的flag_used字段

从数据库获取数据后，点击按钮时需要更新flag_used字段，要求是找到**第一个flag_used不等于true**的对象（包括flag_used未定义的情况），并修改它的flag_used值。

现有组件代码如下：

// App.ts

interface UserSponsorType {
  id: number,
  value: string,
  flag_used?: boolean
}

interface SponsorType{
  user_sponsors: Array<UserSponsorType>
  id: number
}

export function App() {
   const selected<Array<SponsorType>> = data; // 从数据库获取的数据

   const onHandlerClick = () => {
     selected.user_sponsors.map(userSponsor => {
        // 在这里更新flag_used的值
        // 注意：flag_used是可选字段
     });
     console.log(selected);
   }

   return <Button onClick={onHandlerClick}>Click</Button>
}

示例数据：

const data = [
   {
     id: 1,
     user_sponsors: [
        { id: 1, value: "test", flag_used: false},
        { id: 2, value: "test"},
     ]
   },
   {
     id: 2,
     user_sponsors: [
        { id: 3, value: "test", flag_used: true},
        { id: 4, value: "test", flag_used: false},
     ]
   },
   {
     id: 3,
     user_sponsors: [
        { id: 5, value: "test", flag_used: true},
        { id: 6, value: "test", flag_used: true},
        { id: 7, value: "test", flag_used: false},
        { id: 8, value: "test", flag_used: false},
        { id: 9, value: "test", flag_used: false},
     ]
   }
]

解决方案 #

首先要注意：React中直接修改原始数据不会触发视图更新，必须用useState管理状态；另外要精准定位第一个符合条件的对象，避免批量修改。

修改后的完整代码：

import { useState } from 'react';

interface UserSponsorType {
  id: number,
  value: string,
  flag_used?: boolean
}

interface SponsorType{
  user_sponsors: Array<UserSponsorType>
  id: number
}

export function App() {
   // 用useState存储数据，保证状态更新能触发页面刷新
   const [selected, setSelected] = useState<Array<SponsorType>>(data);

   const onHandlerClick = () => {
     let isUpdated = false; // 标记是否已找到并更新目标项
     const updatedSelected = selected.map(sponsor => {
       if (isUpdated) return sponsor; // 已经更新过，直接返回原对象

       // 找到当前sponsor下第一个flag_used不等于true的项的索引
       const targetIdx = sponsor.user_sponsors.findIndex(item => item.flag_used !== true);
       if (targetIdx === -1) return sponsor; // 没有符合条件的项，返回原对象

       // 复制user_sponsors数组，避免直接修改原始数据
       const newUserSponsors = [...sponsor.user_sponsors];
       // 更新目标项的flag_used为true（可根据需求修改为其他值）
       newUserSponsors[targetIdx] = { ...newUserSponsors[targetIdx], flag_used: true };
       
       isUpdated = true; // 标记已完成更新
       return { ...sponsor, user_sponsors: newUserSponsors };
     });

     setSelected(updatedSelected);
     console.log(updatedSelected);
   }

   return <button onClick={onHandlerClick}>Click</button>
}

逻辑说明 #

1. 状态管理：用useState初始化数据，更新时调用setSelected，确保组件能感知数据变化并刷新视图。
2. 精准查找：通过findIndex快速定位第一个flag_used !== true的对象（涵盖字段未定义的场景）。
3. 不可变更新：使用展开运算符...复制数组和对象，避免直接修改原始数据，保证状态更新的稳定性。
4. 单次更新：用isUpdated变量标记是否已完成更新，后续的sponsor项不再处理，确保只修改第一个符合条件的对象。

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