React速打游戏：移除数组单词的最优重构方案咨询

你原来的代码直接修改导入的wordsArray存在两个问题：一是导入的模块数组属于静态资源，直接修改会引发意外副作用；二是违背React状态管理原则，组件无法通过状态更新触发正确重渲染。下面是基于创建新数组而非修改原数组的重构方案：

核心重构思路 #

• 将剩余单词存入React状态，而非直接使用导入的原始数组
• 移除单词时通过filter生成新数组，更新状态
• 借助useEffect联动剩余单词状态与当前显示的随机单词

完整重构代码 #

import originalWordsArray from "./components/wordsArray";
import { useState, useEffect } from "react";

export default function App() {
  // 初始化剩余单词为原数组的浅拷贝，避免修改静态资源
  const [remainingWords, setRemainingWords] = useState([...originalWordsArray]);
  const [currentWord, setCurrentWord] = useState("");
  const [gameOver, setGameOver] = useState(false);

  // 剩余单词更新时，自动获取新的随机单词
  useEffect(() => {
    if (remainingWords.length > 0) {
      const randomIndex = Math.floor(Math.random() * remainingWords.length);
      setCurrentWord(remainingWords[randomIndex]);
    } else {
      setGameOver(true);
    }
  }, [remainingWords]);

  const removeCurrentWord = () => {
    // 通过filter创建新数组，过滤掉当前单词
    const updatedWords = remainingWords.filter(word => word !== currentWord);
    setRemainingWords(updatedWords);
  };

  // 这里可以添加输入校验逻辑，比如用户输入正确时调用removeCurrentWord
  const handleInputSubmit = (userInput) => {
    if (userInput === currentWord) {
      removeCurrentWord();
    }
  };

  return (
    <div className="game-container">
      {gameOver ? (
        <h2>游戏结束！所有单词已完成</h2>
      ) : (
        <>
          <h3>当前单词：{currentWord}</h3>
          {/* 示例输入框，实际可根据需求调整 */}
          <input type="text" onChange={(e) => handleInputSubmit(e.target.value)} />
          <button onClick={removeCurrentWord}>跳过单词</button>
        </>
      )}
    </div>
  );
}

关键细节说明 #

• 避免修改原始数组：用[...originalWordsArray]创建原数组的副本存入状态，彻底隔离静态资源与组件状态
• 纯函数式更新：filter方法返回新数组，不会改变原状态数组，符合React状态不可变的原则
• 逻辑解耦：通过useEffect监听剩余单词变化，自动处理随机单词生成和游戏结束判断，避免重复逻辑

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