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

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

react-hooks filter reactjs javascript

Liam neesan · 技术社区 · 2 年前

我有一个对象数组

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 回复 | 直到 2 年前

Vivek Sharma 2 年前

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 2 年前

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

const validate = () => {

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

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

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

David · 如何多次使用fetch-get响应?

3 年前