Reactjs - Назначение ответа json массиву по умолчанию

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

Если я правильно понял, вы хотите загрузить набор изображений и передать данные в виде массива ImageGallery составная часть.

Есть также что-то не так / нежелательно с вашим кодом:

Когда вы делаете это,

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

Вы на самом деле вызовите функцию loadGallery() вместо каждого рендера вы должны передавать только прототип функции.

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

Ниже вы увидите другой подход для реализации вашего требования. Здесь мы будем загружать изображения и обновлять Product состояние компонента с новым imagesArray из ответа JSON. Поэтому, когда состояние обновляется, компонент перерисовывается и передает новые данные 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>
    );
  }
}

Answer 2

Так что JSON на самом деле не существует в React. Здесь вам, скорее всего, нужно будет настроить класс, который представляет данные JSON и возвращает их на карту. То, что карта делает в основном, это отслоение слоев вашего объекта один за другим. Так что-то вроде

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