关于setState使用的一些坑
setState更新数组
你会发现，如果直接使用push等方法改变state，按理来说，push会改变原数组，数组应该更新，但渲染出来的state并不会更改
let newValue = 1;
const [array, setArray] = useState([]);
const handleChange = (newValue: number) =>{
array.push(newValue);
setState(array);//array更新了，但无法触发渲染
console.log(array);//[1]
//array增加了newValue，但渲染并未发生改变
}
render:
<p>This array is {JSON.stringify(array)}</p> //[]
这是由于js中，数组的赋值是引用传递的，array.push相当于直接更改了数组对应的内存块，但react内部用于对比的array的内存并没有更改，是指向同一个内存的，setState只做shallow compare，因此没有触发re-render。
可以使用扩展运算符，创建一个新数组，更改内存引用
const handleChange = (newValue: number) =>{
const newArray = [...array, newValue];
setState(newArray);//此处本质上是改变了引用
console.log(array);//[]
//array并未改变，但渲染改变了
}
render:
<p>This array is {JSON.stringify(array)}</p> //[1]
或者触发展示组件的re-render，这样即使不改变数组的引用，依然可以正确显示变动。
const handleChange = (newValue: number) =>{
setValue(newValue);
setState(array.push(newValue));//其他更新触发了组件的re-render，此时可以正常显示变动
console.log(array);//[1]
//array改变，且渲染改变
}
render:
<p>This array is {JSON.stringify(array)}</p> //[1]
再给一个直观的例子（感谢我的同事@ling）
直接尝试：https://codepen.io/ling-cao/pen/NWrMRrq
const { useRef, useEffect, useState } = React
const useMemoryState = (init) => {
const [arr, setArr] = useState(init)
const lastArrRef = useRef(null)
const updateArr = next => {
lastArrRef.current = [...arr];
console.log(next);
setArr(next)
}
return [arr, updateArr, lastArrRef.current]
}
let i = 0;
const App = () => {
const [arr, setArr, lastArr] = useMemoryState([0])
const [updateSign, setUpdateSign] = useState(false)
return(
<>
<div className="text"><label>Current array :</label> {JSON.stringify(arr)}</div>
<div className="box-container">
<div className="box">
<h1>Push a number to array</h1>
<pre>setArr(arr.push(i) && arr)</pre>
<br />
<button
onClick={() => {
i++;
setArr(arr.push(i) && arr)
}}
className="btn btn-2 btn-2c">
Try it
</button>
</div>
<div className="box">
<h1>Push a number to array and renew array</h1>
<pre>setArr(arr.push(i) && [...arr])</pre>
<br />
<button
onClick={() => {
i++;
setArr(arr.push(i) && [...arr])
}}
className="btn btn-2 btn-2c">
Try it
</button>
</div>
<div className="box">
<h1>Push a number to array and update another state</h1>
<pre>setArr(arr.push(i) && arr); setUpdateSign(x => !x)</pre>
<br />
<button
onClick={() => {
i++;
{
setArr(arr.push(i) && arr)
setUpdateSign(x => !x)
}
}}
className="btn btn-2 btn-2c">
Try it
</button>
</div>
</div>
</>
);
}
逐次点击第二个按钮或第三个按钮都可以正常更新渲染。
点击第一个按钮，通过console可以看出来，array数组值有更新，但没有渲染（Current array 没变）；再点其他两个按钮时，会把第一个按钮点击更新的结果一起渲染出来。
侧面展示并不是没有更新数组，而是更新后未渲染。
setState不会立即改变数据
setState某种意义上是类似于异步函数的。
// name is ""
this.setState({
name: "name"
})
console.log(`name is ${this.state.name}`)
这样写，name是不能正常显示。
最常用的办法就是使用回调函数
this.setState({
name: "name"
}, () => {
console.log(`name is ${this.state.name}`)
})
多个setState的更新
setState的“异步”是本身执行的过程和代码是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没办法立马拿到更新后的值，形成了所谓的异步。批量更新优化也是建立在“异步”之上的，如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次执行；如果是同时setState多个不同的值，在更新时会对其合并批量更新。
setState异步回调获取不到最新值
useEffect(() => {
const newModel = {
name: props.name,
datasetId: props.datasetId,
modelId: null,
trainingStatus: TrainingStatus.Init,
modelStatus: Status.NotStarted,
} as TrainingModel;
setModels([...models, newModel]);
startTraining(newModel);
}, [props.datasetId]);
const startTraining = async (newModel: TrainingModel) => {
const dataset = await getDataset(newModel.datasetId);
let newModels = [...models];
let currModel = newModels.find(x => x.datasetId == newModels.datasetId);
currModel.trainingStatus = TrainingStatus.CreateDataset;
//此时可通过页面的渲染效果知道models中已有值，但此处断点models为空
setModels(newModels);
};
类似的，老生常谈的，在useEffect里面设置一个Interval，过了Interval time，也同样是useEffect更新时的state值，而得不到最新的state值。
为解决异步导致的获取不到最新state的问题，使用setState的回调函数获取state的当前最新值
const startTraining = async (newModel: TrainingModel) => {
const dataset = await getDataset(newModel.datasetId);
setModels(lastModels => { //此时的lastModels是models的最新值
const nextModels = [...lastModels];
let currModel = nextModels.find(x => x.datasetId == newModel.datasetId);
currModel.trainingStatus = TrainingStatus.CreateDataset;
return nextModels;
});
};
原因是，组件内部的任何函数，包括事件处理函数和effect，都是从它被创建的那次渲染中被[看到]的，也就是说，组件内部的函数拿到的总是定义它的那次渲染中的props和state。想要解决，一般两种方法，一种是上述的使用setState回调函数获取state最新值，一种是使用ref保存修改并读取state。
