React编辑页面未触碰输入框显示校验提示问题求助

问题根源分析 #

你的问题出在三个核心点：

1. Formik初始值未同步后端数据：组件初始化时portfoliosById是空数组，导致Formik的initialValues中portfolio_name_en为空，触发校验错误；而后端数据加载后，Formik的值没有更新，一直保持初始空值状态。
2. 输入框未绑定Formik核心方法：你注释了onChange={formik.handleChange}，且未添加onBlur={formik.handleBlur}，导致Formik无法跟踪字段的touched（触碰）状态，也无法同步输入框值到Formik的values中。
3. Formik默认挂载时执行校验：Formik默认会在组件挂载时运行一次validate，如果初始值不符合规则，就会提前出现错误提示。

修复步骤 #

1. 同步Formik值与后端数据 #

当后端数据加载完成后，调用formik.setValues更新表单值：

const displayRowData = (data) => {
    if (data.Portfolio_Details) {
        setPortfoliosById(data.Portfolio_Details);
        // 更新Formik的表单值
        formik.setValues({
            portfolio_name_en: data.Portfolio_Details.Portfolio_Name_EN
        });
    }
}

2. 绑定输入框的Formik方法 #

恢复onChange并添加onBlur，同时将输入框value绑定到Formik的values：

<InputText 
    id="portfolio_name_en" 
    value={formik.values.portfolio_name_en} 
    name="portfolio_name_en" 
    onChange={formik.handleChange} 
    onBlur={formik.handleBlur} 
    style={{ width: "80%" }} 
/>

3. 关闭挂载时的自动校验（可选） #

如果不想在页面加载时就执行校验，在Formik配置中添加validateOnMount: false：

const formik = useFormik({
    initialValues: {
        portfolio_name_en: ""
    },
    validateOnMount: false,
    validate: (data) => {
        let errors = {};
        if (!data.portfolio_name_en) {
            errors.portfolio_name_en = "Portfolio name in english is required";
        }
        return errors;
    },
    onSubmit: () => {
        // 提交逻辑
    }
});

4. 优化初始状态设置 #

给portfoliosById设置初始默认值，避免初始空值触发不必要的校验：

const [portfoliosById, setPortfoliosById] = useState({ Portfolio_Name_EN: "" });

关键修改后的代码片段 #

const EditRow = () => {
    // ...其他状态与hooks
    const [portfoliosById, setPortfoliosById] = useState({ Portfolio_Name_EN: "" });

    const formik = useFormik({
        initialValues: {
            portfolio_name_en: ""
        },
        validateOnMount: false,
        validate: (data) => {
            let errors = {};
            if (!data.portfolio_name_en) {
                errors.portfolio_name_en = "Portfolio name in english is required";
            }
            return errors;
        },
        onSubmit: () => {
            // 提交逻辑
        }
    });       

    const displayRowData = (data) => {
        if (data.Portfolio_Details) {
            setPortfoliosById(data.Portfolio_Details);
            formik.setValues({
                portfolio_name_en: data.Portfolio_Details.Portfolio_Name_EN
            });
        }
    }

    return (
        <>
            {/* ...其他JSX内容 */}
            <InputText 
                id="portfolio_name_en" 
                value={formik.values.portfolio_name_en} 
                name="portfolio_name_en" 
                onChange={formik.handleChange} 
                onBlur={formik.handleBlur}
                style={{ width: "80%" }} 
            />
            <div>
                {getFormErrorMessage('portfolio_name_en')}
            </div>
            {/* ...其他JSX内容 */}
        </>
    )
}

修改后，只有当你触碰字段（输入框失去焦点）且字段为空，或者编辑时输入不符合规则的内容时，才会显示校验提示，完全符合你的预期。

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