State is updating but Images are not rendering

问题: I am fetching images from an API but when fetch it update the state in react but does not render in nested Card. but when click another list it updates the card and render...

问题:

I am fetching images from an API but when fetch it update the state in react but does not render in nested Card. but when click another list it updates the card and render images. here is my code

 componentDidMount() {
        this.fetch()
    }

this is the fetch method called on component did mount and when pagination changes

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>

                            ))
                        }

I am extreamly sorry if my english is not good but I really need help Thanks


回答1:

problem will propably be in calling async call inside map function on your arrayList (axios(authImageOptions)). Btw you are using map only for iterating through array. That seems weird to me. If you want just iterate use forEach. But my advice is to use map to map arrayList to array of promises and then wait on all of them to be resolved with Promise.All before you continue with setting state.

  • 发表于 2019-03-13 11:56
  • 阅读 ( 177 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除