useState未更新我的应用程序的所有组件

Question

Heyo。与react合作时，我遇到了一个令人困惑的问题。

import { useState } from "react";
function useTheme() {
const [themeName, setThemeName] = useState("dark");
return [themeName, setThemeName];
}
function Other() {
const [themeName, setThemeName] = useTheme();
return <div>{themeName}</div>;
}
function ThemeSwitcher() {
const [themeName, setThemeName] = useTheme();
return (
<>
<button
onClick={() => {
themeName == "dark" ? setThemeName("light") : setThemeName("dark");
}}
>
{"BUTTON"}
</button>
{themeName}
</>
);
}
function App() {
const [themeName, setPalette] = useTheme();
return (
<div>
<ThemeSwitcher />
<Other />
<div>{themeName}</div>
</div>
);
}
export default App;

这是我的问题的一个非常基本的版本，我已经删除了我能想到的所有内容，但它仍然存在。我有一个名为useTheme的钩子应用程序，它提供了一个更改状态变量"名称的函数；主题名称"；。

我有一个按钮组件ThemeSwitch，它在点击时将主题的名称在"one_answers"之间切换；深色"；以及"；光"；。

单击按钮时，themeName状态变量会更新(我确信这一点，因为ThemeSwitch中的{themeName}片段会正确更新)。但是，App中的｛themeName｝和Other中的｛s themeName}实际上并没有更新。我看不出这里有什么不同，我现在很困惑为什么一个会更新，而另一个不会。

初始状态

单击后的状态。

知道为什么尽管状态变量发生了变化，应用程序组件却没有重新绘制吗？

Answer 1

它们是完全独立的状态。此：

function useTheme() {
const [themeName, setThemeName] = useState("dark");
return [themeName, setThemeName];
}

实际上与使用CCD_ 1本身没有什么不同。所以你的问题类似于问为什么，在这里：

function Other() {
const [themeName, setThemeName] = useState();
return <div>{themeName}</div>;
}
function ThemeSwitcher() {
const [themeName, setThemeName] = useState();
// ...

两个CCD_ 2不同步——这是因为它们彼此没有连接。

为了解决这个问题，通常有两种方法可以使用：

• 在一个组件中声明主题状态，这是最顶层的组件，所有子代都可以使用它。然后将状态和状态设置器传递给所有孩子，并让他们根据需要使用道具。当状态和状态设置器没有在很多地方使用时，这通常是一个很好的方法

function App() {
const [themeName, setThemeName] = useTheme();
return (
<div>
<ThemeSwitcher {...{ themeName, setThemeName }} />
<Other {...{ themeName, setThemeName }} />
<div>{themeName}</div>
</div>
);
}

• 或者，使用上下文API。它需要更多的设置，但当你想在父级中创建一些东西，并允许每个子级使用它时，这是一个很好的方法，无论它在组件树中的什么位置，而不需要手动将值作为道具到处传递