React Hooks - 设置对象不重新渲染组件的数据

Question

我正在使用 React useState 来声明我的对象：

const [results, setResults] = useState();
console.log(results);

在同一个文件中，我返回了 React 组件，并传递给它一些道具：

<Table
data={results ? results.Companies : []}
setData={(newArr) => {
let newResults = results;
newResults.Companies = newArr.slice(0);
console.log(newResults);
return setResults(newResults);
}}
/>

PS：请记住，我只传递数据结果。公司是阵列。

在此表组件中，我正在更改结果。公司财产：

props.setData(arr);

因此，当它在表组件中触发功能时：

setData={(newArr) => {
let newResults = results; // I am assigning to newResults current result state
newResults.Companies = newArr.slice(0); // I am replacing newResults.Companies with new array I want to pass
console.log(newResults); // HERE is the desired results output
return setResults(newResults);
}}

newResults变量正是我想要传递给 setResutlts 的结果。但是此设置不会触发重新渲染，并且不会调用此控制台.log(结果(例如。 为什么在我将新值传递给setResults((后它没有触发

Answer 1

AssetData是Table使用的回调。

你在results上有闭包，你变异的状态是一种反模式。

切勿直接更改 this.state，因为之后调用 setState(( 可能会替换您所做的更改。将 this.state 视为不可变的。

由于闭包，您在初始化时不断调用setData的最后一个值results，并且通过改变状态，您实际上不会像setState的工作方式那样更新状态。

了解什么是闭包后，您应该重构代码以使用功能更新：

const setData = (newArr) => {
setResults((prev) => {
let newResults = {...prev, Companies: newArr.slice(0)};
return newResults;
});
}
<Table setData={setData}/>