React按钮点击无法更改文本问题：BopButton组件调试求助

你的代码存在两个关键问题，导致点击按钮后文本未按预期更新：

• 错误访问数组元素属性：actions是纯字符串数组，每个元素都是普通字符串（比如'Bop'），并不是包含text属性的对象。你写的actions[Math.floor(Math.random() * len)].text会返回undefined，调用setAction后action状态值仍为空，所以按钮文本没有变化。
• 初始状态为空：初始action设为空字符串，页面加载时按钮会显示" it"，体验不佳。

修复后的完整代码 #

function BopButton() {
  // 初始值设为数组第一个元素，页面加载时就有正常文本
  const [action, setAction] = React.useState('Bop');
  const actions = ['Bop', 'Twist', 'Spin', 'Pull'];

  function handleClick() {
    const len = actions.length;
    // 直接取数组中的字符串元素，移除多余的.text
    setAction(actions[Math.floor(Math.random() * len)]);
    console.log("change text");
  }

  return (
    <div>
      <button onClick={handleClick}>{action} it</button>
    </div>
  );
}

额外说明 #

如果后续需要把actions改成对象数组（比如[{text: 'Bop'}, {text: 'Twist'}]这种结构），那使用.text访问属性才是正确的，但当前你的数组是纯字符串结构，直接取值即可。

内容的提问来源于stack exchange，提问作者Dan Lee