时间戳

首页 > 解决方案 > 无法在 React 中使用 useState 动态设置文本字符串

javascript - 无法在 React 中使用 useState 动态设置文本字符串

问题描述

谁能告诉我为什么这不起作用？

export default function App() {
  const [buttonStatus, setButtonStatus] = useState('rts');
  const [buttonName, setButtonName] = useState('RTS / MPC DSP');

  const switchButtons = (x) => {
    setButtonStatus(x);
  };

  const displayButtons = () => {
    if (buttonStatus === 'rts') {
      setButtonName('RTS / MPC DSP');
      return <RTSButtons />;
    } else if (buttonStatus === 'rtb') {
      setButtonName('RTB');
      return <RTBButtons />;
    } else if (buttonStatus === 'mpc') {
      setButtonName('MPC');
      return <MPCButtons />;
    }
  };

我想在setButtonName这里用来调整按钮集合的名称：

<h2 className='font-bold text-2xl capitalize -mb-10 mt-2'>{buttonName}</h2>

但似乎在满足条件时有时会出现空白屏幕或无限循环错误消息。是不是因为我应该做

return <RTSButtons />, setButtonName('RTS / MPC DSP')

这有可能吗？

标签： javascriptreactjs

解决方案

在 React 中，修改状态（例如你的setButtonName调用）和渲染组件（React（间接）调用App()）需要分开。如果在渲染过程中尝试修改状态，React 确实会抛出错误。

在您的情况下，您可以buttomName在渲染期间进行计算，而无需将其存储在状态变量中：

export default function App() {
    const [buttonStatus, setButtonStatus] = useState('rts');
  
    const switchButtons = (x) => {
      setButtonStatus(x);
    };

    let buttonName = 'RTS / MPC DSP';
    let buttons;
    if (buttonStatus === 'rts') {
        buttonName = 'RTS / MPC DSP';
        buttons = <RTSButtons />;
    } else if (etc) {
        // ... etc
    }

    // Example usage
    return <>
        <h2 className='font-bold text-2xl capitalize -mb-10 mt-2'>{buttonName}</h2>
        {buttons}
    </>;
}

推荐阅读