React中如何用计数器初始化状态？字符切换计数器失效求助

问题原因 #

你用let counter = 0声明的是组件内部的普通变量，每次组件因状态更新（比如调用setCharacter）触发重渲染时，这个变量都会被重新初始化回0：

• 只打印不更新状态时，组件不会重渲染，counter是同一个变量，能持续递增；
• 一旦调用setCharacter，组件重渲染，counter被重置为0，下次点击时又从0开始递增，看起来就像卡在某个值无法继续。

修复方案 #

把counter改成用useState管理，让React帮你保留这个状态：

import { useState } from 'react';
import data from './data.js';

function CharacterViewer() {
  // 用state管理计数器，初始值为0
  const [counter, setCounter] = useState(0);
  const [character, setCharacter] = useState(data[0]);

  function nextCharacter() {
    // 计算下一个索引，用取模避免超出data长度越界
    const nextIndex = (counter + 1) % data.length;
    setCounter(nextIndex);
    setCharacter(data[nextIndex]);
    console.log(data[nextIndex]);
  }

  return (
    <div>
      <p>{character}</p>
      <button onClick={nextCharacter}>下一个字符</button>
    </div>
  );
}

export default CharacterViewer;

额外提示 #

• 如果不需要循环切换字符，可以加个判断：当nextIndex < data.length时再更新状态，超出后可以禁用按钮或者给出提示；
• 也可以直接通过character的当前值反向查找索引，但用计数器state的方式更直观高效。

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