Рефакторинг 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 в качестве аргумента, аргумент которого - предыдущее состояние, а затемвернуть новый объект состояния после применения бизнес-логики.

Надеюсь, это поможет.