代码之家 › 专栏 › 技术社区 › Liam neesan

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

react-hooks filter reactjs javascript

Liam neesan · 技术社区 · 3 年前

我有一个对象数组

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

并更新过滤后的数组值,如 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>

2 回复 | 直到 3 年前

Vivek Sharma 3 年前

validate函数应该是,这也会在有效的情况下负责将错误恢复回来。

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);
}

Simeon Borisov 3 年前

数组过滤器回调函数希望您返回一个布尔值,说明是否应该过滤掉当前值。我觉得有点像

const validate = () => {

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

在这个例子中,你首先过滤输入值,当它们被过滤时,你将它们设置为状态。这套 inputValues 为所有必填字段,每次单击。