更新特定對象中的特定屬性

Question

我只是停留在相當簡單的任務上而已。 如果已經回答了這個問題，請提前道歉。 我就是找不到。 我有物體處於狀態

    state = {
    controls: {
        email: {
            elementConfig: {
                type: 'email'
            },
            placeholder: 'Email Address',
            value: '',
            validation: {
                required: true,
                isEmail: true
            },
            valid: false,
            touched: false,
            errorMsg: ""
        },
        password: {
            elementConfig: {
                type: 'password'
            },
            placeholder: 'Password',
            value: '',
            validation: {
                required: true,
                minLength: 6
            },
            valid: false,
            touched: false,
            errorMsg: ""
        }
    },
};

並且僅當對象中的“有效”等於“假”時，才需要將“觸摸”更新為“真”，將“ errorMsg”更新為文本

我設法過濾所有具有“有效”值等於false的對象鍵

const invalidInputs = Object.keys(this.state.controls).filter(key => {
        return this.state.controls[key].valid === false
      })

現在，我需要遍歷每個“ invalidInputs”，並將touched更新為true，將“ errorMsg”更新為特定文本。 我努力了

  for (let key in invalidInputs){
        const updatedControl = {
            ...this.state.controls,
            [invalidInputs[key]]: {
                ...this.state.controls[invalidInputs[key]],
                touched: true,
                errorMsg: errorMsg(this.state.controls[invalidInputs[key]].validation, this.state.controls[invalidInputs[key]].value)
            }
        };
        this.setState({controls:updatedControl})
        console.log(updatedControl)
      }

但這顯然不起作用。 誰能給我一些不錯的解決方案或指導我解決問題？

提前致謝

Answer 1

使用for..in對象並檢查valid

 let state = { controls: { email: { elementConfig: { type: 'email' }, placeholder: 'Email Address', value: '', validation: { required: true, isEmail: true }, valid: false, touched: false, errorMsg: "" }, password: { elementConfig: { type: 'password' }, placeholder: 'Password', value: '', validation: { required: true, minLength: 6 }, valid: false, touched: false, errorMsg: "" } }, }; for (let keys in state.controls) { if (!state.controls[keys].valid) { state.controls[keys].errorMsg = 'New Msg'; state.controls[keys].touched = true; } } console.log(state) 

Answer 2

您可以使用map()並根據需要更改對象，而不是使用filter() 。

 let state = { controls: { email: { elementConfig: { type: 'email' }, placeholder: 'Email Address', value: '', validation: { required: true, isEmail: true }, valid: false, touched: false, errorMsg: "" }, password: { elementConfig: { type: 'password' }, placeholder: 'Password', value: '', validation: { required: true, minLength: 6 }, valid: false, touched: false, errorMsg: "" } }, }; let result = Object.keys(state.controls) .map((con) => (!state.controls[con].valid ? ({...state.controls[con],errorMsg:"New msg",touched:true}) : ({...state.controls[con],touched:true}))) console.log(result); 

Answer 3

我只想發布一個對我有用的解決方案，該解決方案與第一個解決方案相同，但不更改狀態

const updatedControls = { ...this.state.controls }

    for (let keys in updatedControls) {
        if (updatedControls[keys].valid === false) {
            const control = updatedControls[keys]
            control.errorMsg = "new msg"
            control.touched = true

            updatedControls[keys] = control
        }
    }
    this.setState({ controls: updatedControls })