Reactjs 如何拆分API获取的链接并在React JS中显示图像

这是API响应：

"placePhotos": "https://i.ibb.co/RvZk2yH/butakovka.jpg,https://i.ibb.co/RNyqScq/butakovka.jpg"

我无法拆分链接拆分（'，'）。
问题2: 如果拆分链接，如何显示图像？使用循环？大概我是否可以将拆分的链接保存到array并使用array.map显示图像

<CardMedia
    component="img"
    alt={placeDescription.placeName}
    height="140"
    image={placeDescription.placePhotos}
    title={placeDescription.placeName}
/>

---

若要拆分数据，您应该

。拆分（“，”）

，您将收到一个包含2个URL的数组。如果要从阵列渲染多组件，应使用

.map（）

。试试这个：

constyourcomponent=（）=>{
...
返回(
...
{
placeDescription.placePhotos.split（'，）.map（（url，索引）=>
}
...
)
}

若要拆分数据，您应该

。拆分（“，”）

，您将收到一个包含2个URL的数组。如果要从数组中呈现多组件，您应该使用

.map（）

。尝试以下操作：

constyourcomponent=（）=>{
...
返回(
...
{
placeDescription.placePhotos.split（'，）.map（（url，索引）=>
}
...
)
}

您可以拆分

placePhotos

，这将创建一个数组，然后可以映射到该数组上

placePhotos
  .split(',')
  .map(photo => <img src={photo} />)

placePhotos
.split（“，”）
.map（照片=>）

您可以拆分

placePhotos

，这将创建一个数组，然后可以映射到该数组上

placePhotos
  .split(',')
  .map(photo => <img src={photo} />)

placePhotos
.split（“，”）
.map（照片=>）

使用

split

是不安全的。我建议在这里使用RegExp:

const regexp=/https？：\/\/.*。（？：png|jpg）/g；
response.placePhotos.match（regexp.map）（url=>(
));

---

请注意，尽可能避免将索引用作组件的键：

使用

split

是不安全的

const regexp=/https？：\/\/.*。（？：png|jpg）/g；
response.placePhotos.match（regexp.map）（url=>(
));

请注意，在可能的情况下，您应该避免使用索引作为组件的键：

{
placeDescription&&placeDescription.placePhotos&&placeDescription.placePhotos.split（'，）.map（（url，索引）=>
)
}

{
placeDescription&&placeDescription.placePhotos&&placeDescription.placePhotos.split（'，）.map（（url，索引）=>
)
}

它显示：TypeError:无法读取的属性“split”undefined@MyrzabekAldiyar你能给我看一下console.log（placeDescription）的结果吗。我认为

placeDescription.placePhotos

可能未定义。我已经解决了这个问题。谢谢。解决方法如下：回答显示：TypeError:无法读取的属性“split”undefined@MyrzabekAldiyar你能给我看一下console.log（placeDescription）的结果吗。我认为

placeDescription.placePhotos

可能未定义。我已经解决了这个问题。谢谢。解决方法在下面的答案中