state 上的組件重新渲染未發生更改

Question

我有一個類似於此代碼框鏈接https://codesandbox.io/s/eatery-v1691中顯示的反應應用程序

單擊頁面底部中心的Menu會呈現MenuFilter組件。

MenuFilter組件又使用一個checkbox組件來呈現多個復選框，這些復選框的選中狀態取決於我在app.tsx中傳遞給MenuFilter的selectedMeals道具。

我讀到，當 state 作為道具傳遞時，一旦 state 發生變化，就會重新渲染，但這並沒有發生。

selectedMeals state 使用 allItems 初始化，然后進行管理，以便在單擊任何其他項目時，設置該項目和 allItems，並且這些單獨的項目可以同時有多個。 state 管理工作正常，但復選框未根據狀態更新！

但是，如果您單擊cancel （確定按鈕尚未執行任何操作），然后再次單擊Menu按鈕，則僅呈現 selectedMeals 道具中的值。

請參閱此處的視頻（ https://youtu.be/Zmfc0MQGaIU這是完整的應用程序，codesandbox 應用程序是對此的表示，但不相同）其中 state 更改（所有項目被刪除，當所有項目被檢查時，其他項目被刪除）有效完美，但復選框未正確重新渲染

我做錯了什么，更重要的是如何獲得我想要的結果？

我最初將問題放在這里，一旦 state 發生更改，但沒有沙箱，並且由於沙箱與我在該問題中提出的不同，我創建了一個新問題。 謝謝。

在這個視頻https://youtu.be/2v3lOPaIPzU我已經在控制台日志中捕獲了selectedMeals的變化，並且我還展示了復選框如何與selectedMeals不匹配。

Answer 1

問題出在Checkbox組件中。

const [checked, setChecked] = useState(isChecked);

isChecked只會被用作初始值， checked不會在每次isChecked更改時更新。 您可以使用isChecked作為依賴項手動更新useEffect掛鈎中的checked ，但這是不必要的，因為Checkbox組件可以在沒有任何 state 的情況下實現。

但是，如果您單擊取消（確定按鈕尚未執行任何操作），然后再次單擊菜單按鈕，則僅呈現 selectedMeals 道具中的值。

這是因為模式是基於menuModalIsShown有條件地呈現的，並且當此 boolean 被切換時，組件卸載並重新安裝，導致useState(isChecked)使用更新的 state。

---

更新Checkbox ：

export const CheckBox = ({
  standAlone,
  text,
  onCheck,
  isChecked,
  value
}:
CheckBoxProps) => {
  return (
    <div
      className={`${styles.checkbox} ${
        standAlone ? "" : styles.notStandAlone
      } `}
    >
      <input
        type="checkbox"
        checked={isChecked}
        onChange={onCheck}
        value={value}
      />
      <label htmlFor={styles.checkbox}>{text}</label>
    </div>
  );
};