React useState疑问：含10元素数组的按钮为何仅能两次切换文本？

核心问题 #

你声明的let count = 0是组件函数内部的普通变量，每次组件重新渲染（比如调用setButtonText更新状态时），这个变量都会被重新初始化回0，这直接导致了计数器行为混乱。另外setCount()没有返回值，所以console.log(setCount())输出undefined是正常的，并非错误。

解决方案：用状态或引用存储计数器 #

React组件中需要跨渲染保留的值，必须用useState或useRef来存储，以下是两种可行方案：

方案1：使用useState管理计数器 #

把count改成状态变量，这样每次更新都会触发组件正确渲染，且值会被稳定保留：

import { useState } from 'react';

// 示例10个字符串的数组
const clickArr = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8', '文本9', '文本10'];

const TextToggleButton = () => {
  const [buttonText, setButtonText] = useState("Click");
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 更新按钮文本为当前count对应的数组项
    setButtonText(clickArr[count]);
    // 用函数式更新确保取到最新的count值，避免闭包问题
    setCount(prevCount => {
      return prevCount < clickArr.length - 1 ? prevCount + 1 : 0;
    });
  };

  return (
    <div className="button" onClick={handleClick}>{buttonText}</div>
  );
};

方案2：使用useRef存储计数器 #

如果不需要count的变化触发组件额外渲染（按钮文本已经通过setButtonText更新），可以用useRef——它的值会在组件整个生命周期内保留，且更新不会触发重渲染：

import { useState, useRef } from 'react';

const clickArr = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8', '文本9', '文本10'];

const TextToggleButton = () => {
  const [buttonText, setButtonText] = useState("Click");
  const countRef = useRef(0); // 用ref存储计数器

  const handleClick = () => {
    // 更新按钮文本为当前ref值对应的数组项
    setButtonText(clickArr[countRef.current]);
    // 更新ref的current值
    if (countRef.current < clickArr.length - 1) {
      countRef.current++;
    } else {
      countRef.current = 0;
    }
  };

  return (
    <div className="button" onClick={handleClick}>{buttonText}</div>
  );
};

额外说明 #

• 注意数组索引从0开始，判断条件用count < clickArr.length - 1，能保证计数器在遍历完10个元素后刚好重置为0，实现完整的循环切换。

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