Reactの動的データのリストに約束から返された値を追加するには？

Question

私が反応するようにWordpressの中で構築された大規模なウェブサイトを移行し、ここに私の問題ですよ：

• ComponentDidMountで、私はAPIを呼び出して、私の状態に追加されるIDの長いリストを取得します。 IDは、私が動的にレンダリングする必要がある人に対応しています。だから今、私は私の状態は私はいくつかのJSXを返すようにオーバーマップするIDの配列として設定している
• 、

すなわちarrayIDs.map（ID => {戻りIMG SRC = {非同期値= == IMGのURLは、私は見つかっていない。問題は、IDごとに、私は上記のように私の約束から非同期値を返す別のAPI呼び出しを行う必要がありますということです/>

• }約束から返さReactで非同期の値をレンダリングする方法レンダリングする必要があるイメージIDの数があらかじめわからないため、状態を使用できません。私はすべてのIDを保留中の約束として配列に入れて状態に設定しようとしましたが、返された約束の値をレンダリングしようとすると、私の約束はすべて保留中です。

TLDR：

私は、各IDは、特定の画像URLを取得するには、別のAPI呼び出しを行う必要がありますIDの動的配列を、レンダリングする必要があります。 ReactのレンダリングメソッドでこのURLを動的にレンダリングする必要があります。 Reactで状態を使用せずに非同期の値をレンダリングするにはどうすればよいですか？別の方法が必要です。

EDIT：

私は '反応し、約束' と呼ばれるNPMパッケージで解決策を見つけた： https://www.npmjs.com/package/react-promise

例：あなたはどのようにについてのあなたの仮定を再考する必要があるよう

import Async from 'react-promise' 

const imgPromise = axios.get('someAPI/' + imageID); 

<Async 
    promise={imgPromise} 
    then={ (resolvedData) => <img src={ resolvedData.imgURL } /> } 
/> 

Answer 1

はそうReactではstateを使用してください。ここで絶対に使用する必要があります。 「レンダリングする必要がある画像IDの数が事前に分からないため状態を使用できません」< =あなたの投稿では、stateにAPIから取得したIDのリストコール。したがって、すでにstateの値を非同期操作から戻して更新しています... URLを非同期的に取得することは、最初にIDを取得することとはどのように異なると思いますか？それは、これをだろう構築の

一つの方法：

トップレベルのコンポーネントマウント。 APIを取得してIDを取得します。レンダリングは終了しますが、APIコールを待機しています。

this.state = { 
    items: [] 
} 

ID API呼び出しが返されます。 IDによる状態更新。同時に、N個のAPI呼び出しが特定のイメージURLを取得し始めます。可能な再レンダリング？ （...あなたは再レンダリングトリガーかについてより正確にshouldComponentUpdate()を使用することができます忘れないでください）

this.state = { 
    items: [ 
     {id: "foo"}, 
     {id: "bar"}, 
     {id: "baz"}... 
    ] 
} 

各URLのフェッチと、それが返された値で、トップレベルの状態を更新します。約束を使用している場合は、実際の価値があるときに約束のチェーンの終わりに状態を更新するだけです。

this.state = { 
    items: [ 
     {id: "foo"}, 
     {id: "bar", url: "http://bar.com"}, 
     {id: "baz"}... 
    ] 
} 

複数のAPI呼び出しが完了すると、それぞれが状態を更新します。最終的に彼らはすべて行われます。あなたのrenderメソッドで

this.state = { 
    items: [ 
     {id: "foo", url: "http://foo.com"}, 
     {id: "bar", url: "http://bar.com"}, 
     {id: "baz", url: "http://baz.com"}... 
    ] 
} 

だけで何とかコンポーネントにあなたの項目をマッピングし、状態が継続的に更新されていることから、コンポーネントが自動的に新しいURLを持つたびに再レンダリングされます。

render() { 
    return (
     <div> 
      { 
       this.state.items.map((ea, i) => { 
        return <img key=`img${i}` src={ea.url ? ea.url : "placeholder.jpg"} /> 
       } 
      } 
     </div> 
    ); 
}