javascript - api响应后渲染 react 组件

Question

我有一个 react 组件，我希望使用 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

变化:

1. 不要在 render 方法中执行 api 调用，为此使用 componentDidMount 生命周期方法。

componentDidMount :

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

2. 在状态数组中定义 imageSource 变量，初始值为 []，一旦您获得使用 的响应更新setState ，它将使用更新后的数据自动重新渲染组件。

3.在render方法中使用state数组生成ui组件。

4. 要在没有获取数据之前保持渲染，将条件放在 render 方法中检查 imageSource 的长度数组，如果长度为零，则 返回 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>
        );
    }
}