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

查看：24
本文介绍了react.js中调用API渲染数组图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有包含

的API

 "图片": ["http:\/\/st​​orage\/web\/source\/images\/2016-10-28\/edac054f88fd16aee7bc144545fea4b2.jpg","http:\/\/st​​orage\/web\/source\/images\/2016-10-28\/9aa3217f37f714678d758de6f7f5222d.jpg",http:\/\/st​​orage\/web\/source\/images\/2016-10-28\/5164ed92c205dc73a37d77e43fe1a284.jpg"]

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

这是我的代码:

const API = 'http://...';导出默认类 Api 扩展 React.Component {构造函数(道具){超级(道具)this.state = {滑块图片:[],}}fetchProfile(id) {让 url = `${API}${name}`;获取(网址).then((res) => res.json() ).then((数据) => {this.setState({滑块图片:data.data.pictures，})}).catch((错误) => console.log(error) )}componentDidMount() {this.fetchProfile(this.state.name);}使成为() {返回 (<div><div><轮播数据={this.state}/>

)}}

导出默认类 Carousel extends React.Component {使成为() {让数据 = this.props.data;返回(<div><React_Boostrap_Carousel animation={true} className="carousel-fade"><div ><img style={{height:500,width:"100%"}} src={data.slider_pics}/>

<div style={{height:500,width:"100%",backgroundColor:"aqua"}}>456

<div style={{height:500,width:"100%",backgroundColor:"lightpink"}}>789

</React_Boostrap_Carousel>

)}};

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

解决方案

我几乎自己想通了.在 Carousel 组件中，我们必须在构造函数中设置循环并在 map 中返回该循环.很快，这是我 100% 工作的代码

导出默认类 Carousel extends React.Component {构造函数(道具){超级(道具)；const slider_pics=[];for (让 i = 0; i <10; i++) {Slider_pics.push(<React_Boostrap_Carousel/>);}this.state = {slider_pics};}使成为() {让数据 = this.props.data;返回(<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}/>

))}</React_Boostrap_Carousel>

)}};

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

I have API which consists 

 "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"
]

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.

That is my code: 

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>
      )
    }
};

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

解决方案

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>
      )
    }
};

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆