Reactjs - 为默认数组分配json响应

我正在使用react-image-gallery来显示图库。我需要从json响应中加载图像。我的代码如下，Reactjs - 为默认数组分配json响应

let imagesArray = [ 
{ 
    original: 'images/products/4.jpg' 
}, 
{ 
    original: 'images/products/2.jpg' 
}, 
{ 
    original: 'images/products/3.jpg' 
} 
]; 

export default class Products extends React.Component { 
    loadGallery() { 
    var requestUrl = 'http://myurl'; 
    var myInit = { method: 'GET', 
       mode: 'cors', 
       cache: 'default' }; 
    fetch(requestUrl).then(response => 
     response.json().then(data => ({ 
      data: data, 
      status: response.status 
     }) 
    ).then(res => { 
     let imagesArray = imagesArray.map((img,i)=>{ return {original: res.data[i].path.split(':')[1]}}) 
    })); 
    } 
    render() { 
    return (
     <div className="products-page" onLoad={ this.loadGallery() }> 
     <ImageGallery 
      ref={i => this._imageGallery = i} 
      items={imagesArray}/> 
     </div> 
    ); 
    } 
}

如果我用let newArray = imagesArray.map((img,i)=>{ return {original: res.data[i].path.split(':')[1]}})它将值分配给newArray

在这里，我怎么可以指定JSON响应imagesArray我的Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

错误？

来源

2016-12-10 Hulk1991

如果我的理解是正确的，你要加载一组图像和数组数据传递到ImageGallery组件。

也有一些错误/不希望你的代码：

当你做到这一点，

<div className="products-page" onLoad={this.loadGallery()}>

你实际上将调用每个渲染功能loadGallery()，而不是你应该只传递函数原型。

<div className="products-page" onLoad={this.loadGallery}>

下面你会看到另一种实现你的需求的方法。在这里，我们将加载图像并使用JSON响应中的新imagesArray更新Product组件的状态。因此，当状态更新时，组件重新渲染并将新数据传递到组件ImageGallery。

const dummyImagesArray = [ 
    { 
    original: 'images/products/4.jpg' 
    }, 
    { 
    original: 'images/products/2.jpg' 
    }, 
    { 
    original: 'images/products/3.jpg' 
    } 
]; 

export default class Products extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     imagesArray: dummyImagesArray 
    } 
    } 

    loadGallery() { 
    var requestUrl = 'http://myurl'; 
    var myInit = { method: 'GET', 
       mode: 'cors', 
       cache: 'default' }; 
    fetch(requestUrl).then(response => 
     response.json().then(data => ({ 
      data: data, 
      status: response.status 
     }) 
    ).then(res => { 
     const imagesArray = this.state.imagesArray.map((img,i) => { return { original: res.data[i].path.split(':')[1] }; }); 
     this.setState({ imagesArray }); 
    })); 
    } 

    render() { 
    return (
     <div className="products-page" onLoad={this.loadGallery}> 
     <ImageGallery 
      ref={i => this._imageGallery = i} 
      items={this.state.imagesArray} 
     /> 
     </div> 
    ); 
    } 
}

来源

2016-12-10 07:16:08

谢谢，它的工作原理 – Hulk1991

所以JSON实际上并不存在于React中。你可能需要在这里做的是建立一个代表JSON数据并返回给地图的类。基本上做什么地图是一个接一个地剥开物体的图层。因此，像，

class ImagesArray extends React.Component() { 
    render() { 
     return { 
      <image src={this.props.original}/> 
     } 
    } 
}

来源

2016-12-10 07:10:54

Reactjs - 为默认数组分配json响应

回答

相关问题