0

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ですか?

4

2 に答える 2

1

私が理解していることが正しい場合は、一連の画像をロードし、データを配列としてImageGalleryコンポーネントに渡します。

あなたのコードには何か間違っている/望ましくないものもあります:

これを行うと、

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

実際にloadGallery()は各レンダーで関数を呼び出しますが、代わりに関数プロトタイプのみを渡す必要があります。

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

以下に、要件を実装するための別のアプローチを示します。ここでは、画像をロードし、JSON レスポンスからProductの new でコンポーネントの状態を更新します。imagesArrayしたがって、状態が更新されると、コンポーネントは再レンダリングされ、新しいデータが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-10T07:16:08.263 に答える
0

したがって、JSON は実際には React には存在しません。ここで行う必要があると思われるのは、JSON データを表し、それをマップに返すクラスをセットアップすることです。マップが基本的に行っているのは、オブジェクトのレイヤーを 1 つずつ剥がすことです。だから何か、

class ImagesArray extends React.Component() {
    render() {
        return {
            <image src={this.props.original}/>
        }
    }
}
于 2016-12-10T07:10:54.387 に答える