Javascript 在数组中更新状态的最佳方法是什么

我有一个循环遍历所有订单的代码，并将

is_confirm

属性更新为1。问题是我必须遍历所有订单，找到与订单id匹配的订单，然后更新它

我的问题是，有没有更有效的方法来实现这一点，而不必遍历所有对象

export const orders = (state = [], action) => {
  const { type, payload } = action;

  switch (type) {
    case "NEW_ORDER":
      const { new_order } = payload;

      const new_state = state.concat(new_order);

      //console.log(new_state);

      return new_state;

    case "CONFIRM_ORDER":
      const { index } = payload;

      return state.map((order) => {
        if (order.id === index) {
          return { ...order, is_confirmed: 1 };
        } else {
          return state;
        }
      });
  }

  return state;
};

---

首先，最好是将你的状态设置为一个对象

export const orders = (state = {orders : []},action)

并以

状态访问阵列。订单

下一步，永远不要改变

状态

变量，首先复制它

let ordersCopy= [...state.orders]

然后可以更改此数组并将其设置为状态：

ordersCopy.forEach((order) => {
                    if(order.id === index){
                        ordersCopy.splice(index,1,{...order, is_confirmed: 1})
                    } 
 return {...state, orders: ordersCopy}

在另一种情况下，

新订单

：

return {...state, orders: [...state.orders, new_order]}

---

首先，最好是将你的状态设置为一个对象

export const orders = (state = {orders : []},action)

并以

状态访问阵列。订单

下一步，永远不要改变

状态

变量，首先复制它

let ordersCopy= [...state.orders]

然后可以更改此数组并将其设置为状态：

ordersCopy.forEach((order) => {
                    if(order.id === index){
                        ordersCopy.splice(index,1,{...order, is_confirmed: 1})
                    } 
 return {...state, orders: ordersCopy}

在另一种情况下，

新订单

：

return {...state, orders: [...state.orders, new_order]}

---

使用React类或Hook to

useState（）

---

请检查此处-

使用React类或Hook创建状态，以

useState（）

---

请检查这里-

我只需要复制数组，并使用

findIndex

查找匹配元素的索引。然后，使用括号对其进行更新以访问元素：

case "CONFIRM_ORDER":
   const { index } = payload;

   const ordersCopy = [...state]
   const orderIndex = ordersCopy.findIndex(order => order.id === index)
   ordersCopy[orderIndex].is_confirmed = 1

   return ordersCopy

---

我只需要复制数组，并使用

findIndex

查找匹配元素的索引。然后，使用括号对其进行更新以访问元素：

case "CONFIRM_ORDER":
   const { index } = payload;

   const ordersCopy = [...state]
   const orderIndex = ordersCopy.findIndex(order => order.id === index)
   ordersCopy[orderIndex].is_confirmed = 1

   return ordersCopy

---

这回答了你的问题吗？我强烈建议您考虑不可变的助手，以更新您的状态，以确保应用程序的数据完整性，这将与适当的单元测试相关联，除了在“代码> MAP中看起来像一个打印错误外，所有的问题看起来都很好。应在哪里阅读

其他部分中的
退货订单
。这是否回答了您的问题？我强烈建议您考虑不可变的助手，以更新您的状态，以确保应用程序的数据完整性，这将与适当的单元测试相关联，除了在“代码> MAP中看起来像一个打印错误外，所有的问题看起来都很好。它应该在
else
部分中读取
returnorder
。将状态设置为对象是不相关的。由于OP已正确处理状态，因此无需复制<代码>前文不比<代码> MAP>代码>在这种情况下，我认为这更糟糕。我看到了你的评论，这是相关的，可以在OP考虑的答案中解释。虽然完全是可选的，但要记住。是的，注意到错误并删除了评论。虽然我的答案可以改进，但我认为这可能会有利于其他寻找同样问题的人。这就是为什么我不删除它。谢谢你提醒我答案。把国家当作一个对象是无关紧要的。由于OP已正确处理状态，因此无需复制<代码>前文不比<代码> MAP>代码>在这种情况下，我认为这更糟糕。我看到了你的评论，这是相关的，可以在OP考虑的答案中解释。虽然完全是可选的，但要记住。是的，注意到错误并删除了评论。虽然我的答案可以改进，但我认为这可能会有利于其他寻找同样问题的人。这就是为什么我不删除它。谢谢你提醒我答案。干杯