React Native如何修改对象内部数组并更新reducer状态

原有实现的核心问题 #

• 直接对completeObject进行原地修改，不符合React和Redux要求的不可变更新原则，会导致状态变更检测失效
• 维护了两个独立的useState状态（completeObject和Point），会出现状态不同步的问题
• 过滤逻辑限制了不能删除下标为0的元素，不符合通用增删需求
• 方法名拼写错误：props.upadteArray应为props.updateArray（如果是定义时的拼写问题需要同步修正）

正确实现方案 #

不需要单独维护Point的状态，直接基于完整对象做不可变更新即可：

// 仅维护一个完整对象的本地状态
const [completeObject, setCompleteObject] = useState(props.completeObject);

// 删除指定下标的Point元素
const deletePointByIndex = (selectedIndex) => {
  // 不可变更新：先拷贝原对象，再生成新的Point数组
  const newCompleteObj = {
    ...completeObject,
    Point: completeObject.Point.filter((_, index) => index !== selectedIndex)
  };
  // 更新本地状态
  setCompleteObject(newCompleteObj);
  // 传递新对象给action更新reducer
  props.updateArray(newCompleteObj);
};

// 新增Point元素的方法示例
const addPoint = (newPointItem) => {
  const newCompleteObj = {
    ...completeObject,
    Point: [...completeObject.Point, newPointItem]
  };
  setCompleteObject(newCompleteObj);
  props.updateArray(newCompleteObj);
};

额外适配说明 #

如果props.completeObject会从父组件/reducer侧主动更新，需要添加useEffect同步本地状态，避免内外状态不一致：

useEffect(() => {
  setCompleteObject(props.completeObject);
}, [props.completeObject]);

如果你的selectedId是元素内部的唯一ID字段而非数组下标，把filter的判断条件改成item.id !== selectedId即可。

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