React数组查找无法读取状态变量问题求助

当硬编码数组索引（如myKanji[0]）时能正常获取对应值，但将索引替换为state变量answer后，出现Cannot read property of undefined错误。已确认answer是数字且在数组索引范围内，页面能正常显示该变量值，但使用它作为索引时仍报错，改为整数则功能正常。

问题原因分析 #

• 初始渲染非法值触发报错：answer初始值为字符串"*"，首次渲染时myKanji["*"]返回undefined，直接访问["translation"]必然抛出错误。
• useEffect异步执行特性：组件首次渲染时，useEffect尚未执行setAnswer，此时仍使用初始值"*"作为索引，导致错误。
• 索引逻辑不匹配：当前useEffect中setAnswer(Math.floor(Math.random() * y.length))设置的是quizKanji数组的索引（0或1），但渲染时却用它作为myKanji的索引，而myKanji的有效索引为0、1、2，逻辑完全错位。

修复方案 #

1. 给answer设置合法初始值（如0或null），避免初始渲染报错。
2. 添加条件判断，确保myKanji中对应条目存在后再访问属性。
3. 修正useEffect中的setAnswer逻辑：y是随机选出的id数组（如[1,3]），应将answer设为y中的某个元素（对应myKanji的id），再通过id匹配到目标条目。

修复后的完整代码 #

import { useEffect, useState } from "react";

export const Quiz = ({ myKanji }) => {
  const [quizKanji, setQuizKanji] = useState([]);
  // 初始值设为myKanji第一个元素的id，避免非法值
  const [answer, setAnswer] = useState(myKanji[0]?.id || 0);

  const kanjiClick = (id) => {
    const correctItem = myKanji.find(item => item.id === answer);
    if (id === correctItem.id) {
      alert(true);
    }
  };

  const findKanji = () => {
    let newKanji = [];
    while (newKanji.length < 2) {
      // 基于myKanji长度生成有效id，避免硬编码3
      let x = Math.floor(Math.random() * myKanji.length) + 1;
      if (newKanji.indexOf(x) === -1) {
        newKanji.push(x);
      }
    }
    return newKanji;
  };

  useEffect(() => {
    const y = findKanji();
    // 从随机选中的id数组里选一个作为正确答案
    const correctId = y[Math.floor(Math.random() * y.length)];
    setAnswer(correctId);
    setQuizKanji(y);
  }, [myKanji]);

  // 用可选链避免空值报错
  const correctTranslation = myKanji.find(item => item.id === answer)?.translation || "";

  return (
    <div>
      <h1>Quizes</h1>
      <h3>
        {correctTranslation}--{answer}
      </h3>
      {quizKanji.map((kanjiId) => {
        const kanjiItem = myKanji.find(item => item.id === kanjiId);
        return (
          <div key={kanjiId}>
            <p onClick={() => kanjiClick(kanjiItem.id)}>
              {kanjiItem.kanji}
            </p>
          </div>
        );
      })}
    </div>
  );
};

补充说明 #

• 移除冗余的myData state，直接使用props传入的myKanji即可。
• 列表渲染添加key属性，符合React规范。
• 使用可选链?.简化空值判断，避免不必要的错误。

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