Javascript 如何将img src映射到React中异步函数的结果？

我试图使用map函数来使用materialui渲染图像，但是我必须在显示它们之前从API获取url，这就是getFoto（）所做的，但是它什么也不显示

返回(
{data&&data.map（（平铺）=>（
{                         // 
console.log（“删除”）}>
}
/>
))
}
)

但是，如果我执行console.log（等待getFoto（tile.propertyId）），它将返回我需要的正确URL

/。。。。。
{
log（wait getFoto（tile.propertyId））//这将返回我在控制台中需要的值
})()}
//.....

这里有什么问题？我是这个异步函数世界的新手，请帮助我。 谢谢

即时通讯使用：

---

-“react”：“^16.13.1”

当您设置

src={wait getFoto（…）}

时，您正在将

src

属性（显然是一个字符串）设置为一个Promise，这显然不起作用。相反，在组件代码中的某个地方，例如

componentDidMount

事件，您应该获取图像并将结果设置为某个状态变量，该状态变量随后成为src：

async componentDidMount() {
  const photo = await getFoto(tile.propertyId);
  this.setState({photo});
}
...
render() {
  ...
  <img src={state.photo} />

异步组件didmount（）{ const photo=wait getFoto（tile.propertyId）； this.setState（{photo}）； } ... render（）{ ... 但请注意，这是假设返回的是照片URL。如果是图像本身，则需要使用base64。类似于

src={

data:image/png；base64，${state.photo}

}

。它还假设

title

在

componentDidMount

方法的范围内。如果不在范围内，您需要使用正确的引用（例如

this.tile

，

this.props.tile

？）。

感谢您的建议！！！我做了以下几点： 首先，我创建了一个名为的新组件，将其添加到原始映射函数中，并将该项作为道具传递：

/。。。
{data&&data.map（（平铺）=>（
))
}
//...

然后，在新的组件中，我添加了最初在map函数中使用的内容，以及useffect钩子中的async函数，并将获取的url存储在useState钩子中：

功能块（道具）{
常量{tile}=props
const[imgSrc，setImgSrc]=useState（“”）；//这是url的钩子
useffect（（）=>{
const getFoto=async（propId）=>{
试一试{
常量url=`……url/${propId}/images`
const response=等待获取（url{
//授权材料
}
});
const responseData=await response.json（）
setImgSrc（responseData.items[0].imageUrl）//在钩子中设置获取的url
}捕获（错误）{
console.log（错误）
} 
}
getFoto（tile.propertyId）；
}, []);
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
flexWrap:“wrap”，
为内容辩护：“周围的空间”，
溢出：“隐藏”，
背景色：theme.palete.background.paper，
},
网格列表：{
宽度：500，
身高：450，
},
图标：{
颜色：“rgba（255，255，255，0.54）”，
},
}));
const classes=useStyles（）；
返回(
console.log（“删除”）}>
}
/>
)
}

---

再次感谢

您可以使用其他方法，如：getFoto（）。然后（src=>）不，请不要在render中运行异步函数。好主意！但是我需要propertyId来调用getFoto（）函数，并在map函数中访问它（tile=>tile.propertyId）。如果我在Beginning调用componentDidMount中的getFoto，如何为map函数中的每个属性设置这个propertyId？我明白了。在这种情况下，每个磁贴都应该是自己的组件。您可以使用具有useEffect和useState的函数组件（参见示例），也可以使用具有自己的组件DidMount和setState的类组件。