时间戳

首页 > 解决方案 > 在 onClick 事件之后 UseState 不会重新呈现页面

reactjs - 在 onClick 事件之后 UseState 不会重新呈现页面

问题描述

通过 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>
        )} );
}

我想重新呈现有关语言更改的页面。

标签： reactjstypescriptreact-hooks

解决方案

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

改变

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

至

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

它会起作用。

推荐阅读