在 onClick 事件之后 UseState 不会重新呈现页面答案

【问题标题】：UseState is not rerendering page after onClick event在 onClick 事件之后 UseState 不会重新呈现页面
【发布时间】：2019-09-08 19:35:08
【问题描述】：

我在通过 useState 钩子设置状态后重新渲染页面时遇到问题。状态值发生变化，但页面没有重新呈现。

export function langauge(props: Props) {
  const [languageChange, setLanguageChange] = React.useState(strings.getLanguage());

return (
        {props.selected !== 'EN' && (
          <MenuItem onClick={() => {
            locale.changeLanguage('en'),
            setLanguageChange('en')
          }}>English - EN</MenuItem>
         {props.selected !== 'FR' && (
          <MenuItem onClick={() => {
            locale.changeLanguage('fr'),
            setLanguageChange('fr')
          }}>French - FR</MenuItem>
        )} );
}

我想在语言更改时重新渲染页面。

【问题讨论】：

它会在语言更改时重新渲染组件，“页面”是什么意思？如果您希望它在其他地方重新渲染，请不要使用本地状态。
语言更改不会重新渲染
@Li357，这是怎么回事？
你认为我应该怎么写？
@Li357 批评逗号运算符的奇怪用法并不能真正帮助回答问题

标签： reactjs typescript react-hooks

【解决方案1】：

您的页面没有重新渲染，因为您实际上并没有根据状态变量languageChange 有条件地渲染内容。您正在根据props.selected 有条件地进行渲染。

改变

{props.selected !== 'EN' && <Component />

到

{languageChange !== 'EN' && <Component />

它会起作用的。

【讨论】：

感谢您的解决方案！