react prop 的问题，我的函数在一种情况下工作，但在另一种情况下不工作

Question

这两个函数在我看来是一样的。但只有第一个生成来自this.state.images 的图像，我希望能帮助解决这个可能很简单的错误。

这行得通

   {this.state.images.map((image, i) => (
     <Image src={image.img}  />
   ))}  

这不起作用

generateImage() {
 this.state.images.map((image) => {
  return image.img;
 });
}

<Image src={this.generateImage()}  />

编辑：

现在可以正确显示了。我现在正试图让它只显示一个图像，其状态为beenCalled 是false。问题是它将渲染所有状态为beenCalled 为false 的图像。不知道如何让 if 语句一旦被执行就停止。

generateImage() {
 return this.state.images.map((image, i) => {
   if(image.beenCalled === false) {
    return  <Image src={image.img} index={i} />
   }
 });
}

Answer 1

你需要返回你的数组：

generateImage() {
 return this.state.images.map((image) => {
  return image.img;
 });
}

另外，如果您有多张图片，通常需要为每张图片创建一个<Image src={...} />。