如何过滤 object 值的数组并在 React JS 中使用 useState 更新值

Question

我有一组 object

const formFields = {
    firstName: {
        value: '',
        label: 'FirstName',
        type: 'text',
        placeHolder: 'Enter Firstname',
        helperText: '',
        required: false,
        error: false
    },
    lastName: {
        value: '',
        label: 'LastName',
        type: 'text',
        placeHolder: 'Enter LastName',
        helperText: '',
        required: false,
        error: false
    },
    emailID: {
        value: 'sfas',
        label: 'emailID',
        type: 'email',
        placeHolder: 'Enter Email ID',
        helperText: '',
        required: true,
        error: false
    },
    password: {
        value: '',
        label: 'password',
        type: 'password',
        placeHolder: 'Enter password',
        helperText: '',
        required: true,
        error: false
    },
    confirmPassword: {
        value: '',
        label: 'confirmPassword',
        type: 'password',
        placeHolder: 'Enter Confirm Password',
        helperText: '',
        required: true,
        error: false
    }
}

const [inpValues, setInpValues] = useState(formFields)

过滤和更新

我正在尝试通过required === true和value.length === 0的值过滤 object

并更新过滤后的数组值，如helperText = "Enter the " + label和error = true

const validate = () => {

    const requiredFields = Object.values(inpValues).filter((fields) => {
    if (fields.required === true && fields.value.length === 0) {

            //How to setInpValues

            //setInpValues(...inpValues, fields: { fields.helperText = "Enter the " + fields.label})
            //fields.error = true
        }
    })
}

<MyButton color="primary" handleOnClick={validate} text="SIGN UP"></MyButton>

Answer 1

validate function 应该是，这也将负责在有效的情况下恢复错误。

const validate = () => {
    let newValues={...inpValues}
    const requiredFields = Object.keys(newValues).forEach((key) => {
    let field=newValues[key];
    if (field.required === true && field.value.length === 0) {
            field.helperText=`Enter the ${field.label}`;
            field.error = true;
            newValues[key]= field;
        }else{
           newValues[key].error=false;
           newValues[key].helperText='';
        }
    })
setInpValues(newValues);
}

Answer 2

数组过滤器回调 function 期望您返回一个 boolean ，说明是否应该过滤掉当前值。 我想像

const validate = () => {

    const requiredFields = Object.values(inpValues).filter((fields) => {
    if (fields.required === true && fields.value.length === 0) {
      return true;
      }
      return false;
    })
    setInpValues(requiredFields)
}

这将解决它。 在此示例中，您首先过滤输入值，当它们被过滤时，您将它们设置为 state。 每次单击时，这inputValues设置为所有必填字段。