IT技术 - react.js中调用API渲染数组图片 - 吾爱随笔录

我有包含的 API

 "pictures": [
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/edac054f88fd16aee7bc144545fea4b2.jpg",
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/9aa3217f37f714678d758de6f7f5222d.jpg",
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/5164ed92c205dc73a37d77e43fe1a284.jpg"
]

我必须在 Carousel 中渲染这些图片。问题是我不知道如何从数组中渲染这些图片，这意味着每张图片都应该分别在每个滑块中输出。

那是我的代码：

const API = 'http://...';

export default class Api extends React.Component {  
  constructor(props) {
    super(props)
    this.state = {
      slider_pics:[
        
      ],
    }
  }
  fetchProfile(id) { 
    let url = `${API}${name}`;
    fetch(url)
      .then((res) => res.json() )
      .then((data) => {   
        this.setState({
          slider_pics:data.data.pictures,
          
        })
      })
      .catch((error) => console.log(error) )
  }
  componentDidMount() {
    this.fetchProfile(this.state.name);
  }
  render() {
    return (
    <div> 
      <div>
            <Carousel data={this.state}/>
      </div>
     </div>
    )
  }
}

export default class Carousel extends React.Component {
    render() {
         let data = this.props.data;
      return(
        <div>
          <React_Boostrap_Carousel animation={true} className="carousel-fade">
            <div >
              <img style={{height:500,width:"100%"}} src={data.slider_pics} />
            </div>
            <div style={{height:500,width:"100%",backgroundColor:"aqua"}}>
              456
            </div>
            <div style={{height:500,width:"100%",backgroundColor:"lightpink"}}>
              789
            </div>
          </React_Boostrap_Carousel>
        </div>
      )
    }
};

在此代码中，所有 URL 图像都在一张幻灯片中呈现，我需要在每张幻灯片中分别呈现每张图片。请帮忙。