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

Question

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

我想在语言更改时重新呈现页面。

Answer 1

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

有条件地渲染

改变

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

到

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

它会起作用。

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

UseState is not rerendering page after onClick event

typescript

reactjs

react-hooks