React Native待办应用修改数组state后视图不更新，仅其它state变更后才渲染

React 的 state 遵循不可变更新原则，你当前的代码直接对原始的 taskItems 数组执行 push、splice 操作，属于修改原数组本身，数组的内存引用地址没有发生变化。当你把同一个引用的数组传给 setTaskItems 时，React 会判定 state 未更新，因此不会触发视图重渲染。只有当你修改 task 这个 state 触发重渲染时，已经被你手动修改的原 taskItems 数组的最新值才会被顺带渲染出来。

修改两个更新数组的方法，永远传入新的数组引用即可：

1. 新增待办时用扩展运算符生成新数组
2. 删除待办时用 filter 方法生成新数组

修改后的代码如下：

const [task, setTask] = useState('');
const [taskItems, setTaskItems] = useState(["Write a task"]);

const textChange = (text: string) => {
  setTask(text)
}

const handleAddTask = () => {
  // 生成新数组传入，不修改原数组
  setTaskItems([...taskItems, task])
  setTask('')
}

const rmTask = (index: number) => {
  // 过滤掉对应下标的项，生成新数组传入
  setTaskItems(taskItems.filter((_, i) => i !== index))
}

原组件渲染逻辑不需要做任何修改。

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