重构 setState 使其在内部有一个函数

Question

我需要帮助重构我的 setState 函数。

我有这个状态：

state = {
    orderForm: {
        name: {
            elementType: 'input',
            elementConfig: {
                type: 'text',
                placeholder: 'Your Name'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        street: {
            elementType: 'input',
            elementConfig: {
                type: 'text',
                placeholder: 'Street'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        zipCode: {
            elementType: 'input',
            elementConfig: {
                type: 'text',
                placeholder: 'ZIP Code'
            },
            value: '',
            validation: {
                required: true,
                minLength: 5,
                maxLength: 5
            },
            valid: false,
            touched: false
        },
        country: {
            elementType: 'input',
            elementConfig: {
                type: 'text',
                placeholder: 'Country'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        email: {
            elementType: 'input',
            elementConfig: {
                type: 'email',
                placeholder: 'Your E-Mail'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        deliveryMethod: {
            elementType: 'select',
            elementConfig: {
                options: [
                    {value: 'fastest', displayValue: 'Fastest'},
                    {value: 'cheapest', displayValue: 'Cheapest'}
                ]
            },
            value: '',
            valid: true
        }
    },
    formIsValid: false,
    loading: false
}

还有这段代码

:

inputChangedHandler = (event, inputIdentifier) => {
    const updatedOrderForm = {
        ...this.state.orderForm
    };
    const updatedFormElement = { 
        ...updatedOrderForm[inputIdentifier]
    };
    updatedFormElement.value = event.target.value;
    updatedFormElement.valid = this.checkValidity(updatedFormElement.value, updatedFormElement.validation);
    updatedFormElement.touched = true;
    updatedOrderForm[inputIdentifier] = updatedFormElement;

    let formIsValid = true;
    for (let inputIdentifier in updatedOrderForm) {
        formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
    }
    this.setState({orderForm: updatedOrderForm, formIsValid: formIsValid});
}

请帮助我以在 setState 中使用函数的方式重构该函数。

据我所知，这样使用是不好的，因为setState是异步的，当它基于之前的状态时，应该在setState内部使用一个函数。

Answer 1

由于setState在React中是异步操作。你的担心是有道理的。

请查看处理程序事件的更新代码。

inputChangedHandler = (event, inputIdentifier) => {
        this.setState(prevState => {
            const updatedOrderForm = {
                ...prevState.orderForm,
            };
            const updatedFormElement = {
                ...updatedOrderForm[inputIdentifier],
            };
            updatedFormElement.value = event.target.value;
            updatedFormElement.valid = this.checkValidity(updatedFormElement.value, updatedFormElement.validation);
            updatedFormElement.touched = true;
            updatedOrderForm[inputIdentifier] = updatedFormElement;

            let formIsValid = true;
            for (let inputIdentifier in updatedOrderForm) {
                formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
            }

            return { orderForm: updatedOrderForm, formIsValid: formIsValid };
        });
    };

在这里，我们将一个函数作为参数传递给 setState，该函数的参数是先前的状态，然后在应用业务逻辑后 return 一个新的状态对象。

希望对您有所帮助。

重构 setState 使其在内部有一个函数

Refactor setState to have a function inside

javascript

setstate

reactjs