React中更新数组内对象：实现本地即时更新的方法

我看你已经搞定了删除操作的即时更新，那更新对象的思路其实差不多——先找到要修改的目标，再用immutability-helper以不可变的方式替换或合并它，这样就能不用刷新页面就看到变化啦。

具体实现步骤（Reducer部分） #

你只需要在UPDATE_BILLING_PLANS_SUCCESS的case里，先定位到要更新的对象在数组中的索引，然后用immutability-helper的$merge（或者$set）来更新对应位置的对象：

import update from 'immutability-helper';

// ...其他reducer代码

case UPDATE_BILLING_PLANS_SUCCESS:
  // 第一步：找到要更新的计费方案在数组中的索引
  const targetIndex = state.billingData.findIndex(plan => plan.billingId === action.data.billingId);
  
  // 只有找到对应索引时才执行更新
  if (targetIndex !== -1) {
    // 第二步：用immutability-helper生成新的数组
    const updatedBillingArray = update(state.billingData, {
      [targetIndex]: {
        $merge: action.data // 合并新的属性值，保留原对象未修改的字段
        // 如果你的更新是完全替换整个对象，也可以写成 $set: action.data
      }
    });
    
    // 第三步：更新state中的billingData
    return update(state, {
      billingData: { $set: updatedBillingArray }
    });
  }
  
  // 如果没找到对应ID的对象，直接返回原状态
  return state;

为什么这么写？ #

• 用findIndex定位目标：通过billingId匹配到要更新的对象位置，确保我们修改的是正确的条目
• $merge vs $set：如果你的updatedBillingPlan只包含修改过的字段，用$merge会更合适，它会把新字段覆盖到原对象上，保留其他未修改的属性；如果是完全替换整个对象，就用$set
• 保持不可变性：immutability-helper帮我们生成新的数组和对象，不会直接修改原state，符合Redux的不可变数据原则

你的Action部分的写法是没问题的，只要确保updatedBillingPlan包含了正确的更新后数据，dispatch到reducer就能触发即时更新啦。

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