显示在 material-UI 卡中获取的 API 数据

Question

我已经尝试了很长时间来执行以下操作：

通过使用钩子（useState 和 useEffets），获取 API，获取对象的三个属性（5000）并将它们中的每个属性放入 material-UI 卡中。

前两步工作正常（请看图片）

但是，我不知道如何使用 map.function 将获取的数据放置在卡内。 我假设 map-function 需要 go 在 App.js 的 return 语句中 m-UI 对象所在的位置。 不过，我还是不知道怎么做。

非常感谢您的任何建议。

Answer 1

对于 map 一个 React 中的数组，你可以这样做：

return (
   <div>
      {photos.map((value, index) => {
         // value is equal to the object at that specific index
         return <MediaCard props={value} />;
      })}
   </div>
);

Answer 2

我建议您为 MediaCard 组件创建一个文件（比如说 MediaCard.js），然后在您的 app.js 文件中使用您在 DataFectching.js 中使用的相同逻辑来获取数据，然后将每张照片呈现在

<li> 

利用：

photos.map((photo, index)=> <MediaCard />)
```
dont forget the props.