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={...} />。

Answer 2

向我们显示您的Image组件，您如何访问该src属性。如果要在该组件中渲染多个图像，则通过props.src.map（）或者，如果您要渲染多个组件，请在map函数中执行此操作，而不要返回image.img return