如何使用Context API实现数据编辑与更新功能？

编辑逻辑的核心是匹配目标交易ID，用新的交易数据替换旧数据，全程保持状态不可变，和你现有新增、删除的实现风格完全兼容。

核心reducer代码 #

case "EDIT_TRANSACTION":
  return {
    ...state,
    transactions: state.transactions.map(transaction => 
      // 匹配到对应ID的交易时替换为新数据，否则保留原数据
      transaction.id === action.payload.id ? action.payload : transaction
    )
  };

注意事项 #

• 触发编辑时传入的action.payload必须是完整的更新后交易对象，必须包含用于匹配的id字段，以及所有修改后的字段值。
• 这里用map方法返回全新数组，没有修改原state数据，符合React状态更新的不可变规范，不会引发意外渲染问题。

调用示例 #

// 示例：修改id为123的交易信息
const updatedTransaction = {
  id: 123,
  amount: 200,
  desc: "超市购物",
  time: "2024-05-20"
  // 其余需要保留的交易字段都要带上
};

dispatch({
  type: "EDIT_TRANSACTION",
  payload: updatedTransaction
});

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