Reactjs

Question

我正在使用 react-image-gallery 来展示画廊。我需要从 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>
    );
  }
}

我得到了 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

的错误

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

这里如何将 json 响应分配给 imagesArray？

Answer 1

所以 JSON 实际上并不存在于 React 中。您可能需要在这里做的是设置代表 JSON 数据的 class 并将其 returns 到地图。 map 基本上做的是一层一层地剥离对象的层。所以像，

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

Answer 2

如果我的理解是正确的，您想要加载一组图像并将数据作为数组传递给 ImageGallery 组件。

你的代码还有一些东西wrong/undesired：

当你这样做时，

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

Reactjs - 将 json 响应分配给默认数组

Reactjs - Assigning json response to default array

arrays

json

cockpit