APIレスポンス後の反応成分のレンダリング

Question

Dropbox APIを使用して画像を取り込みたい反応成分があります。 apiの部分はうまく動作しますが、データが&を経由する前にコンポーネントがレンダリングされるため、配列は空です。コンポーネントに必要なデータが得られるまで、コンポーネントのレンダリングをどのように遅らせることができますか？

var fileList = []; 
var images = []; 
var imageSource = []; 

class Foo extends React.Component { 

render(){ 
    dbx.filesListFolder({path: ''}) 
    .then(function(response) { 
    fileList=response.entries; 
    for(var i=0; i<fileList.length; i++){ 
    imageSource.push(fileList[0].path_lower); 
    } 
    console.log(imageSource); 
    }) 

    for(var a=0; a<imageSource.length; a++){ 
    images.push(<img key={a} className='images'/>); 
    } 

    return (
    <div className="folioWrapper"> 
    {images} 
    </div> 
); 
} 
} 

ありがとうございました！

Answer 1

まず、component's stateを使用し、グローバルに定義された変数を使用しないでください。

イメージの空の配列でコンポーネントを表示しないようにするには、コンポーネントに条件付きの「読み込み」クラスを適用し、配列が空でなくなったときにコンポーネントを削除する必要があります。

Answer 2

データが更新されたときに再レンダリングされるように、コンポーネントの状態または小道具を使用する必要があります。 Dropboxの呼び出しは、renderメソッドの外で行う必要があります。そうしないと、コンポーネントが再レンダリングされるたびにAPIが表示されます。あなたができることの例を以下に示します。

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     imageSource: [] 
    } 
    } 

    componentDidMount() { 
    dbx.filesListFolder({ path: '' }).then(function(response) { 
     const fileList = response.entries; 

     this.setState({ 
     imageSource: fileList.map(file => file.path_lower); 
     }) 
    }); 
    } 

    render() { 
    return (
     <div className="folioWrapper"> 
     {this.state.imageSource.map((image, i) => <img key={i} className="images" src={image} />)} 
     </div> 
    ); 
    } 
} 

まだ画像がない場合は、空のレンダリングをします。divこのようにします。

Answer 3

変更：

1.は、内部API呼び出しを行う方法をレンダリングする、そのためのcomponentDidMountライフサイクルメソッドを使用しないでください。

componentDidMount：

componentDidMount（）は直ちに が搭載されている構成要素の後に呼び出されます。 DOMノードを必要とする初期化はここに行かなければなりません。 がリモートエンドポイントからデータをロードする必要がある場合、これは がネットワーク要求をインスタンス化するのに適しています。このメソッドで状態を設定すると、 が再レンダリングをトリガーします。

2.

あなたは setStateを使用して応答アップデートを得れば、それは自動的に更新されたデータを持つコンポーネントを再レンダリングされます、初期値 []と、状態配列の imageSource変数を定義します。

状態配列を使用して、レンダリング方法でuiコンポーネントを生成します。あなたがデータを取得していないまでの長さがゼロで、その後return nullであればimageSource配列の長さをチェックしrenderメソッド内で条件を入れて、レンダリングを保持するために

4.。あなたがイメージを持っていたら、私はその部品を実装う

class Foo extends React.Component { 

    constructor(){ 
     super(); 
     this.state = { 
      imageSource: [] 
     } 
    } 

    componentDidMount(){ 
     dbx.filesListFolder({path: ''}) 
      .then(function(response) { 
       let fileList = response.entries; 
       this.setState({ 
        imageSource: fileList 
       }); 
      }) 
    } 

    render(){ 
     if(!this.state.imageSource.length) 
      return null; 

     let images = this.state.imageSource.map((el, i) => <img key={i} className='images' src={el.path_lower}/>) 

     return (
      <div className="folioWrapper"> 
       {images} 
      </div> 
     ); 
    } 
}