react hook使用useState更新数组,无法更新问题及解决
作者：on_风而
这篇文章主要介绍了react hook使用useState更新数组,无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
const [textList, setTextList] = useState(原数组); setTextList(新数组);
当修改原数组时，如果原数组是个深层数组，使用setTextList修改时，不会触发页面刷新
原因分析
这个涉及到可变对象和不可变对象的知识，
在vue和react中，如果更新可变对象时，可能会引起视图更新，
这是因为，vue和react默认都是浅监听，只会监听数据的第一层，
如果数据是引用类型，内层数据发生改变，并不会监听到。
解决方法
这里应该先将原数组浅拷贝，赋值给新数组，再修改新数组（不影响原状态）
将修改后的新数组使用setValue传递进去，这样就会引起视图更新
const [value, setValue] = useState(initialArray);
return{
//item是个数组
add: (item: T) => setValue([...value, item]),
removeIndex: (index: number) => {
// 把value copy一遍，解构一遍，再把结构的值为了生成新的数组，相当于浅拷贝，这样才能触发更新数据
const copy = [...value];
copy.splice(index, 1);
setValue(copy);
},
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。