通过在react.js中调用API渲染数组图片 [英] Rendering array pictures from calling API in react.js

问题描述

我有包含

 "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中渲染这些图片.问题是我不知道如何从数组中渲染图片，这意味着每张图片应分别在每个滑块中输出.

I have to render these pictures in Carousel. The problem is I have no idea how to render that pictures from an array, means that each picture should be outputted in each slider separately.

那是我的代码:

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图像都在一张幻灯片中呈现，我需要在每张幻灯片中分别呈现每张图片.请帮忙.

In this code all the URL images are rendering in one slide, I need each picture renders separately in each slide. Please help.

推荐答案

我几乎是自己想出来的.在Carousel组件中，我们必须在构造函数中设置循环，然后在map中返回该循环.很快，这是我的代码，适用于100％

I almost figured out on my own. In Carousel component we have to set the loop in constructor and return that loop in map. Shortly, this is my code that is working for 100%

export default class Carousel extends React.Component {
  constructor(props) {
    super(props);
      const slider_pics=[];  
       for (let i = 0; i < 10; i++) {
         slider_pics.push(<React_Boostrap_Carousel />);
    }
     this.state = {slider_pics};    
  }
    render() {
         let data = this.props.data;
      return(
        <div>
          <React_Boostrap_Carousel animation={true} className="carousel-fade">
              {data.slider_pics.map((slider_pic, index) => (
                <div  key={index}>
                <img  style={{heght:200, width:1000}} src={slider_pic} />
                </div>
              ))}
          </React_Boostrap_Carousel>
        </div>
      )
    }
};

API组件将是相同的，只需要像上面的代码一样更新Carousel组件

The API component will be the same, just need to update the Carousel component like code above

这篇关于通过在react.js中调用API渲染数组图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！