链路中的变量通过槽状态无法更新
我在useState应用程序中更新我的主题。这是传递到顶部-组件每道具。console.log()每次更改时都会被触发。从Topbar主题被传递到一个链接到作为状态，这是可行的，但是当我现在改变主题的状态时，它只在Topbar中更新。我甚至试过Useeffect。只有当我刷新站点时，更改才会被注意到。我读了好几个小时关于这件事，但不知怎么解决不了。
AppComponent (并不是所有代码都是必需的)：
function App() {
const [theme, setTheme] = useState('dark')
return (
<Topbar theme={theme}></Topbar>
<ToggleButton variant='light' onClick={() => setTheme('light')}>Light</ToggleButton>
<ToggleButton variant='dark' onClick={() => setTheme('dark')}>Dark</ToggleButton>TopbarComponent：
export default function Topbar({theme}) {
console.log('Topbar',theme)
React.useEffect(()=>{
console.log('changed')
},[theme])当我按下按钮时输出：
顶杆灯
变化
顶条暗
变化
AboutMeComponent：
export default function AboutMe() {
const location = useLocation()
console.log(location.state)
React.useEffect(() => {
console.log('About-Me',location.state)
},[location])初步产出：
漆黑
关于我的黑暗
当我现在按下另一个按钮时，我只在刷新AboutMe输出时才得到Topbar输出。
PS的主题是改变无论如何从黑暗到光明，但我需要这种状态，以改变字体等。
回答 2
Stack Overflow用户
发布于 2022-10-24 22:56:46
我建议继续使用文档的建议，即在这个使用上下文设置主题的示例中使用useContext。
退房：https://beta.reactjs.org/apis/react/useContext
用法:将数据深入到树中。
import { useContext } from 'react';
function Button() {
const theme = useContext(ThemeContext);useContext返回您传递的上下文的上下文值。若要确定上下文值，请在组件树中搜索，并为该特定上下文找到上面最接近的上下文提供程序。
若要将上下文传递给Button，请将其或其父组件包装到相应的上下文提供程序中：
function MyPage() {
return (
<ThemeContext.Provider value="dark">
<Form />
</ThemeContext.Provider>
);
}
function Form() {
// ... renders buttons inside ...
}不管提供者和Button之间有多少层的组件。当表单中任何位置的按钮调用useContext(ThemeContext)时，它将接收“黑暗”作为值。
Stack Overflow用户
发布于 2022-10-27 21:49:51
我现在让它和useContext挂钩一起工作。谢谢我不知怎么忘了。
应用程序：
export const ThemeContext = React.createContext()
function App() {
const [theme, setTheme] = useState('black')
console.log(theme)
return (
<ThemeContext.Provider value={{backgroundColor:theme}}>
<BrowserRouter>
<div className='App' id={theme}>
<Topbar/>
<div className="position-absolute top-0 start-0">
<ToggleButton variant='light' onClick={() => setTheme('white')}>Light</ToggleButton>
<ToggleButton variant='dark' onClick={() => setTheme('black')}>Dark</ToggleButton>
</div>
Topbar:
export default function Topbar() {
const {user,logout} = UserAuth()
const [error, setError] = useState('')
const navigate = useNavigate()
const style = useContext(ThemeContext)
console.log(style)AboutMe：
export default function AboutMe() {
const style = useContext(ThemeContext)
console.log(style)
return (
<>
<div className='d-flex' style={style}>我不得不将路由从Index.js移到App.js，因为它必须包装在上下文提供程序中，但是现在我的主题被传递到每个组件中。
https://stackoverflow.com/questions/74187214
复制相似问题
腾讯云开发者
