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

【问题标题】：React Hooks - setting object not re-rendering the component's dataReact Hooks - 设置对象不重新渲染组件的数据
【发布时间】：2020-10-09 11:38:27
【问题描述】：

我正在使用 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 是 array。

在这个 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()

后它没有触发

【问题讨论】：

你能做一个codesandbox吗？
@RedBaron 这是一种复杂的项目和代码。我正在从使用令牌的 API 中获取初始结果等等......
但是如果您使用模拟数据制作简化版本，那么它应该可以工作

标签： javascript reactjs react-hooks setstate use-effect

【解决方案1】：

因为setData 是Table 使用的回调。

你在results上有closures 并且你改变了an anti-pattern的状态。

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

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

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

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

【讨论】：