Javascript React Hooks-设置对象不重新渲染组件'；s数据

我正在使用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);
          }}
        />

因此，当它触发表中的函数时组件：

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变量正是我希望传递给setResults的结果。但此设置不会触发重新渲染，例如，不会调用此console.log（results）。

---

为什么在我将新值传递给setResults（）

后它不被触发，因为

setData

是

表使用的回调

您有关于
的结果
，并且您改变了当前的状态

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您所做的变异。将this.state视为不可变的

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

理解闭包是什么之后，您应该重构代码以使用：

const setData=（newArr）=>{
设置结果（（上一个）=>{
让newResults={…prev，companys:newArr.slice（0）}；
返回新结果；
});
}
作为
setData
是
表使用的回调

您有关于
的结果
，并且您改变了当前的状态

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您所做的变异。将this.state视为不可变的

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

理解闭包是什么之后，您应该重构代码以使用：

const setData=（newArr）=>{
设置结果（（上一个）=>{
让newResults={…prev，companys:newArr.slice（0）}；
返回新结果；
});
}
你能制作一个代码沙盒吗？@RedBaron这是一种复杂的项目和代码。我正在从API获取初始结果，我在API中使用令牌等等…但是如果你用模拟数据制作一个简化版本，那么它应该可以工作。你能制作一个codesandbox吗？@RedBaron这是一种复杂的项目和代码。我正在从API获取初始结果，我在API中使用令牌等等…但是如果您使用模拟数据制作一个简化版本，那么它应该可以工作
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);
              }}

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