首页 > 解决方案 > 如果条件在功能组件中使用旧状态

问题描述

我正在构建一个使用 react 和 laravel 的创建功能,我遇到了一个我无法修复的错误。问题是,我发现了一个错误并试图以一种很好的方式处理它,如果没有显示错误,那么进行“成功操作”。

一些代码:

const createProduct = async (event) => {
    const RESPONSE = await axios.post('/api/create-product', formData, {
        'Content-Type': 'multipart/form-data',
    })
    .then((response) => response.data)
    .catch(error => {
        const errorValues = Object.values(error.response.data.errors);
        const errorsArray = [];

        errorValues.forEach((errorArray) => {
            // Save message from API to an array and omit the dot
            errorArray.forEach((errorMessage) => errorsArray.push(errorMessage.slice(0, errorMessage.length - 1)));
        })

        setMessage({
            show: true,
            text: errorsArray.join(', '),
            type: 'danger',
        });
    });
    if( message.show == false ) {
        if( RESPONSE.status ) {
             do things ...
        }
    }
}

但是如果遇到错误,反应会比较旧状态,然后抛出错误“无法访问属性状态,响应未定义”......有关如何绕过此行为的任何建议?

编辑:通过添加 try 和 catch 块来解决它。代码:

try {
        const RESPONSE = await axios.post('/api/create-product', formData, {
            'Content-Type': 'multipart/form-data',
        })
        .then((response) => response.data);

        if( RESPONSE.status ) {
            do things...
        }

        if( RESPONSE.message ) {
            setMessage({
                show: true,
                text: RESPONSE.message,
                type: RESPONSE.status ? 'success' : 'danger',
            });
        }
    } catch(error) {
        const errorValues = Object.values(error.response.data.errors);
        const errorsArray = [];

        errorValues.forEach((errorArray) => {
            // Save message from the API to an array and omit the dot
            errorArray.forEach((errorMessage) => errorsArray.push(errorMessage.slice(0, errorMessage.length - 1)));
        })

        setMessage({
            show: true,
            text: errorsArray.join(', '),
            type: 'danger',
        });

        return Promise.reject(errorsArray);
    }

标签: javascriptreactjsreact-hooksstate

解决方案


推荐阅读