useEffect 不會重新渲染主父組件

Question

當我更改其他組件中的 state '單擊按鈕' 時，useEffect 不會重新呈現主要父組件。 當我重新加載頁面時，神奇的天堂。 我應該如何在不重新加載頁面的情況下在此事件上重新呈現主<App />組件？

const ResponsiveAppBar = () => {
const defaultDark = window.matchMedia(
    '(prefers-color-scheme: dark)'
).matches;

let [theme, setTheme] = useLocalStorage(
    'theme',
    defaultDark ? 'dark' : 'light'
);

React.useEffect(() => {
    console.log('theme changed into: ', theme);
    <App />;
}, [theme]);

const switchTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    console.log(newTheme);
    setTheme(newTheme);
};

Answer 1

您正在尋找的內容在此處進行了解釋 (Context - React) 。

基本上，您應該使用 React Context 在父組件和子組件之間共享 state。 如果子組件想要更改 Theme，您可以從 Context 中獲取setTheme鈎子並根據需要調用它。

Answer 2

如果你想擁有明暗模式，你必須能夠在每個地方訪問 state 你應該了解反應上下文 api或者嘗試學習Redux如果你制作大型應用程序