设置React State前正确使用map：修改布尔值遇undefined问题

我尝试在onClick事件中修改模拟数据里的布尔值，通过state维护模拟数据，需要将isCreated从true改为false并更新到state。目前打印mock的三个数据正常，但获取isCreated时显示undefined，附上代码请帮忙排查错误。

Mock Data #

const custDetail = {
    customers: [
      {
        name: "Abc",
        isCreated: true,
      },
      {
        name: "bcd",
        isCreated: true,
      },
      {
        name: "Dec",
        isCreated: true,
      },
    ],
  };

现有代码 #

const [creatingCust, setCreatingCust] = useState([custDetail])

const onHandle = () => {
const custData = [...creatingCust]
custData.map((customerData) => (
  //console.log(customerData.customers.isCreated) is giving undefined but if I removed
  //isCreated I am getting values
  customerData.customers.isCreated === false
  setState(custData)
))

错误原因分析 #

1. 属性访问错误：customerData.customers是一个数组，不是单个对象，数组本身没有isCreated属性，直接访问自然返回undefined，必须遍历数组内的每个客户对象才能拿到该属性。
2. State更新不规范：你在map循环里尝试调用setState（实际应该是setCreatingCust），这会导致多次不必要的state更新；同时直接修改数组元素属于 mutate 原数据，不符合React的不可变更新原则。
3. 语法错误：map回调里的代码逻辑混乱，既没有返回值，也没有正确的赋值逻辑。

修正后的代码 #

const [creatingCust, setCreatingCust] = useState([custDetail])

const onHandle = () => {
  // 不可变更新：逐层拷贝数据，避免修改原state
  const updatedData = creatingCust.map(item => ({
    ...item,
    // 遍历customers数组，修改每个客户的isCreated为false
    customers: item.customers.map(customer => ({
      ...customer,
      isCreated: false
    }))
  }));
  
  // 一次性更新state
  setCreatingCust(updatedData);
};

代码说明 #

• 第一层map处理creatingCust数组中的每个对象，用扩展运算符...拷贝原对象的所有属性，避免直接修改原数据。
• 第二层map遍历customers数组中的每个客户对象，同样通过扩展运算符拷贝后，将isCreated修改为false。
• 最后调用setCreatingCust一次性更新处理完成的数据，符合React的state更新规范。

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