web-dev-qa-db-ja.com

API応答後の反応コンポーネントのレンダリング

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

ご協力いただきありがとうございます！

javascriptreactjsdropbox-api
13
r_cahill

変更点：

1。 renderメソッド内でAPI呼び出しを行わないで、そのためにcomponentDidMountライフサイクルメソッドを使用します。

componentDidMount：

componentDidMount（）は、コンポーネントがマウントされた直後に呼び出されます。 DOMノードを必要とする初期化はここに行く必要があります。リモートエンドポイントからデータをロードする必要がある場合、これはネットワーク要求をインスタンス化するのに適した場所です。このメソッドで状態を設定すると、再レンダリングがトリガーされます。

2。状態配列のimageSource変数を初期値_[]_で定義し、応答更新を取得したらsetStateを使用して、更新されたデータでコンポーネントを自動的に再レン​​ダリングします。

。状態配列を使用して、renderメソッドでUIコンポーネントを生成します。

4。データを取得しなくなるまでレンダリングを保持するには、renderメソッド内に条件を設定し、長さがゼロの場合はimageSource配列の長さを確認し、その後_return null_にします。

次のように書きます：

_class Foo extends React.Component {

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

    componentDidMount(){
        dbx.filesListFolder({path: ''})
          .then((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>
        );
    }
}
_
18
Mayank Shukla

データの更新時にコンポーネントが再レンダリングされるように、コンポーネントの状態または小道具を使用する必要があります。 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をこのようにレンダリングします。

6
DonovanM

まず、 コンポーネントの状態 を使用し、グローバルに定義された変数を使用しないでください。

したがって、画像の空の配列でコンポーネントを表示しないようにするには、コンポーネントに条件付きの「ロード」クラスを適用し、配列が空でなくなったら削除する必要があります。

0
Francisco Mateo