Javascript 状态正在更新，但图像未渲染

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

 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>

                            ))
                        }

fetch=（params={}）=>{
让lang=localStorage.getItem（“lang”）；
让accessToken=localStorage.getItem（“accessToken”）；
让tokenType=localStorage.getItem（“tokenType”）；
让clientId=localStorage.getItem（“clientId”）
让sortOrder='DESC'
让img_id；
设page=params.page | | this.state.current；
让数据={
clientId:clientId，
第页：第1页，
尺码：8，
郎,，
名称：params.name | |“”，
名字：params.arabicname | |“，
description:params.description | |“”，
sortColumn:'baseUom.name'，
排序器：“”
}
var-arrayList；
console.log（数据）
var-authImageOptions；
const self=this
var imgUrl=[]
axios({
url:API_url+“productsByClient”，
方法：“POST”，
数据，
标题：{
“授权”：令牌类型+“”+accessToken，
“内容类型”：“应用程序/json”
}
})。然后（数据=>{
console.log（data.data）
arrayList=[…data.data.content]
console.log（arrayList）
arrayList.map（（项目，i）=>{
如果（项目生产）{
authImageOptions={
方法：“GET”，
responseType:'blob'，
url:API_url+'getImage'，
参数：{
imageId:item.prodImg，
lang:localStorage.getItem（“lang”）
},
标题：{
“授权”：令牌类型+“”+accessToken
}
}
axios（authImageOptions）
.然后（功能（响应）{
var reader=new FileReader（）；
reader.readAsDataURL（response.data）；
reader.onload=（）=>{
imgUrl[i]=reader.result
}
})
.catch（函数（错误）{
message.error（error.response.data.message）；
});
}否则{
imgUrl[i]=''
}
})
自我状态({
productList:arrayList，
totalPageItem:data.data.totalElements/8*10，
伊姆古尔
})
}).catch（错误=>{
console.log（错误）
})}
{this.state.productList.map（（项，键）=>(
{item.name}
))
}

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

---

谢谢

问题很可能是在arrayList（axios（authImageOptions））上调用异步调用内部映射函数。顺便说一句，您只使用map遍历数组。我觉得这很奇怪。如果您只想迭代，请使用forEach。但我的建议是使用map将arrayList映射到承诺数组，然后等待所有承诺都通过Promise解决。所有这些都是在继续设置状态之前完成的

嗯，我也尝试过同样的方法，但它不起作用，但现在它起作用了，非常感谢