时间戳

首页 > 解决方案 > 状态正在更新，但图像未呈现

javascript - 状态正在更新，但图像未呈现

问题描述

我正在从 API 获取图像，但是在获取它时会更新反应状态，但不会在嵌套卡中呈现。但是当单击另一个列表时，它会更新卡片并渲染图像。这是我的代码

 componentDidMount() {
        this.fetch()
    }

这是在组件上调用的 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>

                            ))
                        }

如果我的英语不好，我非常抱歉，但我真的需要帮助谢谢

标签： javascriptreactjsaxios

解决方案

问题可能是在您的arrayList（axios（authImageOptions））上的map函数内部调用异步调用。顺便说一句，您使用 map 仅用于遍历数组。这对我来说似乎很奇怪。如果您只想迭代使用 forEach。但我的建议是使用 map 将 arrayList 映射到 promise 数组，然后等待所有这些都用 Promise.All 解决，然后再继续设置状态。

推荐阅读