如何使用React的useEffect实现角色猜谜游戏功能？

以下是针对需求补充完善的代码逻辑，包含changeChar、scoreHandler及useEffect的实现：

假设现有组件基础结构 #

如果你的现有代码已包含基础状态定义，可跳过这部分：

import { useState, useEffect } from 'react';

const CharacterQuiz = ({ characters }) => {
  const [currentChar, setCurrentChar] = useState(null);
  const [options, setOptions] = useState([]);
  const [score, setScore] = useState(0);

  // 待实现的函数放在此处

  return (
    <div>
      <h2>当前角色信息</h2>
      {currentChar && (
        <div>
          <p>职业: {currentChar.role}</p>
          <p>技能: {currentChar.abilities.join(', ')}</p>
        </div>
      )}
      <h3>请选择正确角色:</h3>
      <div className="options">
        {options.map((char, idx) => (
          <button key={idx} onClick={() => scoreHandler(char)}>
            {char.name}
          </button>
        ))}
      </div>
      <p>当前分数: {score}</p>
    </div>
  );
};

export default CharacterQuiz;

1. 实现 changeChar 函数 #

负责随机选取目标角色，并生成包含正确答案的4个唯一选项：

const changeChar = () => {
  // 随机选取目标角色
  const randomIndex = Math.floor(Math.random() * characters.length);
  const targetChar = characters[randomIndex];

  // 从剩余角色中随机选3个不重复的角色
  const otherChars = characters.filter(char => char.id !== targetChar.id);
  const randomOtherChars = [];
  while (randomOtherChars.length < 3) {
    const randomOtherIdx = Math.floor(Math.random() * otherChars.length);
    const selectedChar = otherChars[randomOtherIdx];
    if (!randomOtherChars.includes(selectedChar)) {
      randomOtherChars.push(selectedChar);
    }
  }

  // 合并并打乱选项顺序
  const allOptions = [targetChar, ...randomOtherChars].sort(() => Math.random() - 0.5);

  setCurrentChar(targetChar);
  setOptions(allOptions);
};

逻辑说明：

• 通过随机索引选取目标角色，用唯一标识（如id）过滤掉已选中的角色
• 循环选取3个不重复的其他角色，合并后打乱顺序，避免正确答案固定位置
• 若无id字段，可替换为name或其他唯一属性做判断

2. 实现 scoreHandler 函数 #

处理用户选择，更新分数并切换下一轮角色：

const scoreHandler = (selectedChar) => {
  if (selectedChar.id === currentChar.id) {
    setScore(prev => prev + 1);
  } else {
    setScore(prev => prev - 1);
  }
  changeChar();
};

逻辑说明：

• 对比用户选择与目标角色的唯一标识，判断对错并更新分数
• 分数更新后立即调用changeChar生成下一轮游戏内容

3. 实现 useEffect 初始化逻辑 #

组件挂载时初始化游戏内容：

useEffect(() => {
  if (characters && characters.length > 0) {
    changeChar();
  }
}, [characters]);

逻辑说明：

• 依赖characters数组，确保角色列表更新时重新初始化游戏
• 增加非空判断，避免数组为空时触发报错

注意事项 #

• 确保characters数组中每个角色都有唯一标识，否则过滤和判断逻辑会失效
• 若角色数组长度小于4，需额外添加提示逻辑（如"角色数量不足，无法开始游戏"）

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