Re-render child 当 prop 在 App.js 中改变时

Question

我需要我的页面 header 在特定操作发生时发生变化。为此，我正在 App.js.

内部进行更改

function App() {

  const [list, setList] = useState([]);

  function addList(id) {
    var updated = list
    updated.push(id)
    setList(updated)
  }

  return (
    <Router>
      <div className="App">
        <Header list={list}></Header>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Header.js
const Header = ({list}) => {

    return (
        <div>
            <p>list</p>
        </div>
    );
}

当 setList 发生时，我需要 Header 成为 re-rendered。而且我假设它会因为列表作为道具传递。

我有一些其他路由运行 addList 但问题是 Header 不是 re-rendered。我确信有更好的方法来解决这个问题...

Answer 1

我认为没有发生重新渲染的原因是因为“更新”和“列表”基本上是相同的对象引用。你能试试吗

常量更新 = [...列表]

在改变之前创建列表对象的克隆

Answer 2

如果状态是对象或数组，则不应直接改变状态。

    var updated = list

当您执行上述操作时，updated 和 list 都指向同一个引用。所以当你这样做时

 updated.push(id)

您正在更新 updated 和 list。实际问题出在这一行

setList(updated)

当调用setList函数时，react会检查对象的引用是否改变了？在我们的例子中，即使我们正在推送一个项目，我们也不会更改引用。由于引用未更改，因此 React 认为没有发生任何更改，因此不会重新渲染。

要解决此问题，您需要复制现有状态并连接新 ID

function addList(id) {
    setList(existingList => ([...existingList, id]))
  }

使用 ... 运算符创建现有列表的新副本。

Re-render child 当 prop 在 App.js 中改变时

Re-render child when prop changes in App.js

javascript

reactjs

react-props