Состояние обновляется, но изображения не отображаются

Question

Я получаю изображения из API, но при получении он обновляет состояние в реакции, но не отображает во вложенной карте. но при нажатии на другой список он обновляет карту и отображает изображения. вот мой код

 componentDidMount() {
        this.fetch()
    }

это метод выборки, который вызывается при монтировании компонента и при изменении нумерации страниц

fetch = (params = {}) => {
        let lang = localStorage.getItem("lang");
        let accessToken = localStorage.getItem("accessToken");
        let tokenType = localStorage.getItem("tokenType");
        let clientId = localStorage.getItem("clientId")
        let sortOrder = 'DESC'
        let img_id;
        let page = params.page || this.state.current;
        let data = {
            clientId: clientId,
            page: page - 1,
            size: 8,
            lang,
            name: params.name || '',
            nameAr: params.arabicname || '',
            description: params.description || '',
            sortColumn: 'baseUom.name',
            sortOrder: ''
        }
        var arrayList;
        console.log(data)
        var authImageOptions;

        const self = this
        var imgUrl = []
        axios({
            url: API_URL + 'productsByClient',
            method: 'POST',
            data,
            headers: {
                'Authorization': tokenType + ' ' + accessToken,
                'Content-Type': 'application/json'
            }
        }).then(data => {
            console.log(data.data)
            arrayList = [...data.data.content]
            console.log(arrayList)
            arrayList.map((item, i) => {
                if (item.prodImg) {
                    authImageOptions = {
                        method: 'GET',
                        responseType: 'blob',
                        url: API_URL + 'getImage',
                        params: {
                            imageId: item.prodImg,
                            lang: localStorage.getItem("lang")
                        },
                        headers: {
                            'Authorization': tokenType + ' ' + accessToken
                        }
                    }
                    axios(authImageOptions)
                        .then(function (response) {
                                var reader = new FileReader();
                                reader.readAsDataURL(response.data);
                                reader.onload = () => {

                                    imgUrl[i] = reader.result

                                }
                        })
                        .catch(function (error) {
                            message.error(error.response.data.message);
                        });
                    } else {
                        imgUrl[i] = ''

                }
            })
            self.setState({
                productList: arrayList,
                totalPageItem: data.data.totalElements / 8 * 10,
                imgUrl
            })
         }).catch(err => {
            console.log(err)
        })}

{this.state.productList.map((item, key) => (

                                <Col span={6}
                                key={key}
                                >
                                     <Card style={{ height: '180px', marginTop: '20px' }}
                                        hoverable                                                
                                        cover={<img src={localStorage.getItem("myImage"[key])} alt="Product Image" style={{ height: '80px', width: '200px !important' }} />}
                                    >
                                        <p style={{ fontSize: 'small', fontWeight: 650, textAlign: 'center' }}>{item.name} </p>
                                    </Card>
                                </Col>

                            ))
                        }

Мне очень жаль, если мой английский не очень хорош, но мне действительно нужна помощь Спасибо

Answer 1

проблема будет заключаться в вызове асинхронного вызова внутри функции карты в вашем массиве arrayList (axios (authImageOptions)). Кстати, вы используете карту только для перебора массива. Это кажется странным для меня. Если вы хотите просто повторить, используйте forEach. Но я советую использовать map для сопоставления arrayList с массивом обещаний, а затем подождать разрешения всех из них с помощью Promise.All, прежде чем продолжить настройку состояния.