React前端更新state后变更条目不显示，如何编写reducer的UPDATE逻辑

问题原因 #

你之前的UPDATE_ANIMALS分支写法不生效，是因为你直接把判断逻辑的箭头函数放入了新数组字面量中，没有遍历执行state里的条目，最终返回的数组会同时包含原state所有元素和一个未执行的函数对象，完全不符合更新预期。

正确实现代码 #

把UPDATE_ANIMALS分支替换为以下写法即可：

case 'UPDATE_ANIMALS':     
  return state.map(item => 
    item.id === action.payload.id ? action.payload : item
  );

逻辑说明 #

• 用map方法遍历原state数组，返回的是全新的数组，符合reducer不可变更新的规范，能触发React的重渲染
• 遍历每个条目时，匹配id和payload携带的id：匹配成功就返回更新后的完整对象，匹配失败就返回原条目，未修改的条目会保留引用，减少不必要的重渲染
• 如果你只需要更新条目下的部分字段，不需要全量替换对象，可以调整为局部更新的写法：

case 'UPDATE_ANIMALS':     
  return state.map(item => 
    item.id === action.payload.id ? {...item, ...action.payload} : item
  );

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