React useState 更新数组无效的问题及解决方法

问题

有一次使用了 useState 方法更新数组，但是数据没有发生变化。

const [array, setArray] = useState([]);

let data = [];

for (let index = 0; index < 10; index++) {
  data = [index, index + 1, index + 2];
  setArray(data);
}

console.log(array); //输出 [0,-1,-2]

原因及解决方法

由于时间原因，我没太查资料，我猜测是 data 的指针是同一个，所以触发 setArray 的时候，是不会做 diff 检查的，也就是说检查不到数组的变化。

上面都是我个人的猜测，解决方法是用 [...data] 新建一个数组，这时候指针发生了变化，setArray 自热就生效了。对于对象的操作估计也可以用 {...data} 的方式去更新。

代码如下

let data = [];

for (let index = 0; index < 10; index++) {
  data = [index, index + 1, index + 2];
  setArray([...data]);
}

如果还是不太明白，看一下这个你大概就可以猜到原因了。

true === true // true
false === false // true
1 === 1 // true
'a' === 'a' // true

{} === {} // false
[] === [] // false
() => {} === () => {} // false

const z = {}
z === z // true