React新手求助：触发HandleInstitution时出现educations未定义错误

问题根源 #

你在HandleInstitution函数的setEducations回调里犯了两个关键错误：

• 回调调用prevEducation.map()后没有返回结果，导致整个回调返回undefined，setEducations(undefined)直接把educations状态改成了undefined，后续渲染时educations.map()就会抛出错误。
• 直接修改educationItem.institution的值，违反了React状态不可变的原则，可能引发组件渲染异常。

修复代码 #

将HandleInstitution函数替换为以下代码：

function handleInstitution(event, id){
    const { value } = event.target;
    
    setEducations((prevEducation) => {
        return prevEducation.map((educationItem) => {
            if(educationItem.id === id){
                // 返回新对象，不修改原状态
                return { ...educationItem, institution: value };
            }
            return educationItem;
        });
    });
}

额外优化提示 #

• 函数名统一使用小驼峰命名（比如把HandleInstitution改成handleInstitution），符合React代码规范。
• handleAddEducation里的ID生成逻辑可以优化，比如用Date.now()替代educations.length + 1，避免后续如果添加删除功能时出现ID重复的问题。

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