React类组件嵌套存储initialValues时如何设置并展示表单校验错误？

• 嵌套状态读写路径完全不匹配：所有表单字段、错误提示都存在this.state.initialValues对象内，但现有setState调用都把字段直接写在state顶层，完全没有修改嵌套对象的内容，页面读取initialValues下的字段时，永远拿不到更新值。
• 计算属性用法错误：deliverable_name对应的change事件传参为'initialValues.deliverable_name'，用这个字符串当计算属性key时，会生成一个名为initialValues.deliverable_name的顶层state字段，根本不会更新嵌套对象里的deliverable_name值。
• 提交时序错误：类组件的setState是异步批量更新的，现有提交逻辑在校验函数调用后立刻执行，没有等待错误状态更新完成，哪怕有校验错误，也会直接触发父组件的提交方法。
• 控制台能看到日志但页面不显示错误，本质就是状态写入位置和读取位置不对应，页面引用的initialValues.xxx_error一直是空值，自然不会渲染错误提示。

所有状态更新统一操作initialValues对象内的字段，不要在state顶层写无关字段。

1. 修正表单输入的change事件处理逻辑 #

替换原有handleChange函数，统一拷贝现有initialValues对象，在对象内部修改值和错误提示，再整体回写到state：

handleChange = (e, fieldName) => {
    // 浅拷贝现有表单值，避免直接修改原state对象
    const currentValues = { ...this.state.initialValues };
    let isValueValid = true;

    // 单独处理备注长度校验
    if(fieldName === 'deliverable_notes'){
        if(e.target.value.length > 300){
            isValueValid = false;
            currentValues.deliverable_notes_error = 'Description must contain less than 300 characters';
        }
    }

    // 校验通过时，更新字段值并清空对应错误
    if(isValueValid){
        currentValues[fieldName] = e.target.value;
        currentValues[`${fieldName}_error`] = "";
    }

    // 把更新后的表单对象整体回写state
    this.setState({
        initialValues: currentValues
    })
}

2. 修正deliverable_name的事件传参 #

把原来带路径的字符串参数改成纯字段名，不要传initialValues.deliverable_name：

<InputBase
    className={`milestone-input-deliverable-name`}
    autoComplete={"off"}
    placeholder={"MileStone Name"}
    onChange={e => this.handleChange(e, 'deliverable_name')}
    value={initialValues.deliverable_name}
    maxLength="100"
    autoFocus={true}/>

3. 重写校验函数的状态更新逻辑 #

所有校验函数统一操作initialValues对象内的错误字段，不要直接在state顶层设置错误值：

validateMileStoneName = (values) => {
    if(!values.deliverable_name || values.deliverable_name.length < 4 ){
        console.log("enter deliverable name")
        values.deliverable_name_error = 'Please enter deliverable name'
    }
}

validateMileStoneDueDate = (values) => {
    if(!values.due_date){
        values.due_date_error = 'Please enter due date'
    }
}

validateMileStoneDescription = (values) => {
    if(!values.deliverable_notes){
        values.deliverable_notes_error = 'Please enter description'
    }
}

4. 修正提交逻辑 #

把所有校验逻辑放在同一个流程里处理，等待错误状态更新完成后，再判断是否需要触发父组件的提交方法，避免异步带来的时序问题：

handleSubmit = () => {
    // 拷贝现有表单值
    const currentValues = { ...this.state.initialValues };
    // 依次执行所有校验，直接在拷贝的对象上修改错误值
    this.validateMileStoneName(currentValues);
    this.validateMileStoneDueDate(currentValues);
    this.validateMileStoneDescription(currentValues);
    // 检查是否存在任意非空的错误提示
    const hasFormError = Object.keys(currentValues).some(key => key.endsWith('_error') && currentValues[key]);

    // 回写更新后的表单状态，在回调里处理后续逻辑，保证拿到最新的错误状态
    this.setState({ initialValues: currentValues }, () => {
        console.log(currentValues)
        // 无错误时才向父组件传值提交
        if(!hasFormError){
            this.props.handleData(currentValues)
        }
    })
}

修复完成后，render中读取initialValues.deliverable_name_error这类字段时，就能拿到校验设置的错误值，对应的条件渲染逻辑就会正常显示错误提示了。

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