React新手求助：如何实现随机内容切换按钮并正确更新state？

你的代码里存在几个关键问题 #

• setColor是React useState返回的状态更新函数，不能用赋值=来修改状态，必须通过调用函数传递新值的方式更新，原代码里setColor = {button}是错误写法。
• 随机索引生成逻辑有问题：原genRandomInt函数传入max=1时，会返回0、1、2，但你的button数组只有2个元素（索引0和1），取索引2会得到undefined，导致状态错误。
• 点击按钮时的逻辑错误：你想把随机选中的数组项设置为状态，但原代码里把整个数组传给了setColor，而不是单个元素。

修正后的完整代码 #

import { useState } from 'react'; // 别忘导入useState，React组件必须依赖这个

const buttonOptions = ['Home', 'Support']; // 换个变量名，避免和<button>标签混淆

function FavoriteColor() {
  // 初始状态设为数组里的项，更贴合你的需求
  const [selectedItem, setSelectedItem] = useState("Home");

  // 修正随机索引生成逻辑，只返回数组的有效索引
  function genRandomInt(max) {
    return Math.floor(Math.random() * max);
  }

  // 点击按钮的处理逻辑抽成单独函数，更清晰
  const handleButtonClick = () => {
    // 生成0到数组长度-1的随机索引
    const randomIdx = genRandomInt(buttonOptions.length);
    // 调用状态更新函数，传入选中的随机项
    setSelectedItem(buttonOptions[randomIdx]);
  };

  return (
    <>
      {/* 把文本改成对应需求的描述，原来的color不符合现在的功能 */}
      <h1>My selected item is {selectedItem}!</h1>
      <button type="button" onClick={handleButtonClick}>
        {/* 这里可以显示当前选中项，或者随机待选项，看你需求 */}
        {selectedItem}
        {/* 如果要按钮每次显示不同的随机选项，改成：{buttonOptions[genRandomInt(buttonOptions.length)]} */}
      </button>
    </>
  );
}

核心知识点梳理 #

• useState返回的状态更新函数（比如setSelectedItem）是函数，必须通过setState(新值)的方式调用，不能用赋值运算符。
• 生成数组随机索引时，要基于数组.length来计算，确保索引范围是0到数组.length-1，避免越界报错。
• 把点击事件抽成单独的处理函数，代码会更清晰，也方便后续扩展逻辑。

内容的提问来源于stack exchange，提问作者Dudler Roland Janos