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);
          }}
        />

P.S.: 请记住，我只传递给 data results.Companies 这是数组.

在这个 Table 组件中，我正在更改 results.Companies 属性:

props.setData(arr);

所以当它触发Table组件中的函数时：

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 的结果。但是此设置不会触发重新渲染，并且不会调用此 console.log(results) 示例。为什么在我将新值传递给 setResults()

后它没有触发

Answer 1

因为 setData 是 Table 使用的回调。

您有 closures on results and you mutate state which is an anti-pattern.

Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.

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

了解什么是闭包后，您应该重构代码以使用 functional updates:

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

React Hooks - 设置对象不重新呈现组件的数据

React Hooks - setting object not re-rendering the component's data

javascript

setstate

reactjs

react-hooks

use-effect