使用event.target.value在find()中返回undefined，但设置useState变量正常

你遇到的问题核心是字符串与数字的类型不匹配，导致find()方法找不到对应项：

• 下拉框选中后，event.target.value返回的是字符串类型（比如"371"）
• 而你数组里的classID是数字类型（比如371）
• 用===做全等比较时，字符串和数字不会被视为相等，因此find()返回undefined，后续访问.subjectID自然拿不到有效值。

硬编码能成功，是因为你直接写的是数字（比如371），和数组里的classID类型一致，全等判断成立。

只需要把event.target.value转换成数字类型，再进行匹配即可，推荐两种写法：

写法1：使用Number()转换类型 #

const setClass = (event) => {
    const selectedClassID = Number(event.target.value);
    console.log(selectedClassID);
    setClassID(selectedClassID);
    
    const matchedClass = classOption.find(item => item.classID === selectedClassID);
    if (matchedClass) { // 增加判断避免找不到时报错
        const subjectID = matchedClass.subjectID;
        setSubjectID(subjectID);
        console.log(subjectID);
    }
};

写法2：用一元加号快速转数字 #

const setClass = (event) => {
    const selectedClassID = +event.target.value; // 一元加号简洁转数字
    console.log(selectedClassID);
    setClassID(selectedClassID);
    
    const matchedClass = classOption.find(item => item.classID === selectedClassID);
    if (matchedClass) {
        setSubjectID(matchedClass.subjectID);
        console.log(matchedClass.subjectID);
    }
};

额外优化建议 #

• 可以把classID的初始状态改成null或者0（数字类型），保持状态类型统一，避免后续其他逻辑出现类型问题：

  const [classID, setClassID] = useState(null);
  

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