React state 在子組件中更新，但在父組件中未更新

Question

我知道更改 state 是異步的，需要使用以前的 state。 但是最近我遇到了一個奇怪的問題。 修改 state 后，更改在子組件（實際上是孫子組件）中可見，但在回調到父組件期間，更改在那里不可見。 這是偽代碼

const Parent = () => {
  const [items, setItems] = React.useState([]);


  ... some method
  const changeState = (...) => {
    setItems( items => [...items, {id: 100, value: "Test"}]);
  }

  const callback = (id) => {
    const v = items.find( i => i.id == id );
// ERROR: v is undefined
  }

  return(<Child items={items} callback={callback} />);
}

const Child = ({items, callback) => {
...
  const onClick = () => {
    callback(100);
  }
...
}

場景如下：

1. 在 Parent 中調用 changeState 方法
2. Child 使用正確的數據呈現
3. 當項目被渲染時，它有一個 onClick 方法，它的 id 作為參數
4. onClick在Child被稱為
5. 在具有 id 的父級中調用回調（已從父級傳遞給子級）
6. 出現錯誤，因為... id 在 Parent 的 state 中不存在。

任何想法在哪里尋找問題的根源？

Answer 1

我完全同意國際象棋

在我看來，您的代碼似乎是正確的。 正如您所指出的，父組件在某些時候必須包含有效items state。 否則它無法在子組件中更新它。

我想到的一件事：難道setItems function 是從其他地方調用的嗎？ 這可以解釋奇怪的行為。

我認為更完整的代碼示例可能有助於深入了解這一點。