React App 仅在第一次状态更改时重新渲染，即使更改成功，第二次更改也看不到更改

Question

我正在尝试在 React 应用程序中实现暗模式。 我在我的子组件上进行了切换，以将主题更改为暗模式。 因此，假设我们从暗模式开始并单击切换，然后主题更改为亮模式。 现在，如果再次切换，主题不会改变，但状态值会改变。

据我了解，如果一个状态发生变化，组件应该重新渲染，而且它只会重新渲染一次！

请让我知道出了什么问题。

App.js
------
import themes from '../theme';
import Container from '../common/container';

const App = function(props) {

 const [darkMode, setDarkMode] = React.useState(true);

 const changeTheme = function(){
  console.log('Dark Mode is ' + darkMode + ', Setting it to ' + !darkMode)
  setDarkMode(!darkMode)
 }
 
 return (
  <Router>
    <ThemeProvider theme={ darkMode ? themes.darkTheme : themes.lightTheme}>
      <CssBaseline />
      <Container darkMode={darkMode} changeTheme={changeTheme}>
        </Container>
    </ThemeProvider>
  </Router>
 );
}

如您所见，App 组件的状态为 darkMode，并且其切换被传递给子组件 Container。

Container.js
------------

const Container = function(props) {
 return (
  <Box>
    <AppBar position="static">
        <Toolbar>
            .
            .
          <IconButton color="primary" onClick={(event) => props.changeTheme()}>{ props.darkMode ?
          <Brightness4Icon /> : <BrightnessHighIcon /> }</IconButton>

           <Button variant="contained" color="primary">Login</Button>
        </Toolbar>
    </AppBar>
    <Box>
      {props.children}
    </Box>
  </Box>
 )
}

所以在Container组件中，如果点击IconButton，就会调用App组件的changeTheme函数。

现在，这段代码的结果是 - 我只能在第一次点击时更改主题，无论是先暗模式还是先亮模式。 第二次和进一步的点击不会改变主题。

另外，正如您所注意到的，我在 changeTheme 中有一个日志语句。 PF 附加的控制台屏幕截图。

因此，根据我的理解，如果 darkMode 更改，应用程序应该重新渲染。 但只是第一次做。

谢谢你的帮助！

Answer 1

我不确定您的代码有什么问题，但是如果您使用的是Context ，则无需将 darkMode 传递给Container 。

我根据您的代码制作了一个快速工作示例，对其进行修改以满足您的需要。

import React from 'react'
import ReactDOM from 'react-dom'

const ThemeContext = React.createContext("light");

function App() {
  const [darkMode, setDarkMode] = React.useState(true);

  const changeTheme = function(){
    console.log('Dark Mode is ' + darkMode + ', Setting it to ' + !darkMode)
    setDarkMode(!darkMode)
 }  

  return (
    <ThemeContext.Provider value={darkMode ? "dark" : "light"}>
      <Container changeTheme={changeTheme}/>
    </ThemeContext.Provider>
  )
}

function Container({changeTheme}) {
  const theme = React.useContext(ThemeContext);

  return <React.Fragment>
    {theme}

    <button onClick={changeTheme}>Toggle Theme</button>
  </React.Fragment>;
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

如您所见，在Container您可以使用useContext来获取主题值，无需将其作为属性传递，这就是上下文的全部意义所在。

您可以在此CodeSandbox 中测试上面的代码

如果不清楚，您可以在React Docs 中阅读有关useContext钩子的更多信息。 还有一个主题上下文实现的例子。