如果条件在功能组件中使用旧状态

时间:2021-02-23 10:29:48

标签: javascript reactjs react-hooks state

我正在构建一个使用 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 ...
        }
    }
}

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

编辑:通过添加 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);
    }

0 个答案:

没有答案
相关问题