React组件prop中遍历数组实现单个输入校验状态控制

你的思路完全可行，在组件的prop属性中直接使用数组的includes()方法就能实现单个输入框的错误状态控制，同时需要修正状态更新的写法（原代码中push的用法有误），具体修改如下：

1. 修改PersonalInfo.jsx中Input的valid属性 #

直接通过valid.includes(错误标识)判断当前输入框是否需要显示错误状态，取反后传给valid prop：

const [valid, setValid] = useState([]);
// 姓名输入框
<Input
    id="nameInput"
    label="Name"
    errorLabel="Name - Please enter a valid name"
    type="text"
    // 判断数组中是否存在"nameFalse"，存在则valid为false（显示错误）
    valid={!valid.includes("nameFalse")}
    onChange={(e) => setNameValue(e.target.value)}
    value={nameValue}
    placeholder="e.g. Stephen King"
/>
// 邮箱输入框同理
<Input
    id="emailInput"
    label="Email"
    errorLabel="Email - Please enter a valid email"
    type="email"
    valid={!valid.includes("emailFalse")}
    onChange={(e) => setEmailValue(e.target.value)}
    value={emailValue}
    placeholder="e.g. stephenking@example.com"
/>
<Button
    setValid={setValid}
    nameValue={nameValue}
    valid={valid}
    emailValue={emailValue}
    step={step}
    setStep={setStep}
/>

2. 修正Button.jsx中的状态更新逻辑 #

原代码中valid.push()存在两个问题：一是会直接修改原状态数组（违反React状态不可变性原则），二是push返回的是数组新长度而非新数组，会导致valid状态变成数字而非数组。修改为创建新数组的方式：

const handleNext = () => {
    // 每次校验先清空错误列表，避免重复添加
    const newErrors = [];
    if (!validateName({ nameValue })) {
        newErrors.push("nameFalse");
    }
    if (!validateEmail({ emailValue })) {
        newErrors.push("emailFalse");
    }
    // 更新错误状态数组
    setValid(newErrors);

    // 只有当所有校验通过时才跳转步骤
    if (newErrors.length === 0) {
        setStep(step + 1);
    }
};

补充说明 #

• React状态更新必须遵循不可变性，不能直接修改原数组/对象，必须创建新的引用传递给setState
• includes()方法可以高效判断数组中是否存在指定元素，完全满足你在prop中做条件判断的需求
• 每次校验重置错误数组，避免多次点击按钮后错误标识重复累积

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