记录一次错误使用setState导致页面不会重新渲染

问题描述

我自定义了一个hook，hook接收一个数组作为state的初始值，这个hook有个removeIndex方法，作用是传入数组的下标index，然后从数组中删除这个值

代码：

export const useArray = (persons: Person[]) => {
  const [value, setValue] = useState(persons);

  const removeIndex = (index: number) => {
    let arr = value;
    arr.splice(index, 1);

    setValue(arr);
  };
  return {
    value,
    removeIndex,
  };
};

在这个removeIndex方法中，我直接使用赋值的方式将value赋值给arr，众所周知，这是一个浅拷贝操作，然后就对arr进行操作，删除了下标为index 的值

导致结果：

在使用这个方法时，state虽然变化了，但并未导致页面的重新渲染

原因：

在arr改变的时候，value也跟着改变，导致我们改变arr的操作变为直接修改state，而没有通过setState来修改，最后在通过setState修改state的时候，导致修改后的state和之前的state一样，从而没有触发页面的更新。

为什么不能直接修改state呢？

我们来看react的生命周期：

 react是通过setState来触发页面的渲染，而我们提前更改了state的值，导致在shouldComponentUpdate方法中，判断setState前后state值没有变化，导致他返回false，从而页面没有更新

引用其他人的回答：

改了state然后setState（{}）会怎样，如果你不做性能优化以阻止不必要的更新，那么这么做没有任何问题。但如果你要用sCU来阻止组件不必要的更新，那你是要在sCU里面判断新的state与旧的是不是一样的（===），如果是一样的，就不用更新，但如果按你的写法，对象变了，但还是同一个对象，sCU会返回false（因为sCU的一般写法就是判断新旧state/props是不是一样，不一样才返回true），则组件不更新，但其实数据已经变了，这就不对了。

解决：

 const removeIndex = (index: number) => {
    let arr = [...value];
    arr.splice(index, 1);

    setValue(arr);
  };

将value进行深拷贝，然后改变arr的值，在setState，state改变，从而触发页面更新