Javascript 在api响应之后呈现react组件

我有一个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>
  );
 }
}

var fileList=[]；
var图像=[]；
var imageSource=[]；
类Foo扩展了React.Component{
render（）{
dbx.FileListFolder（{路径：'}）
.然后（功能（响应）{
fileList=response.entries；
对于（var i=0；i首先，您应该使用，而不是使用全局定义的变量

因此，为了避免显示带有空图像数组的组件，您需要应用条件“加载”在组件上初始化，并在数组不再为空时将其删除。
您应该使用组件的状态或道具，以便在数据更新时重新渲染。对Dropbox的调用应该在
render
方法之外完成，否则每次重新渲染组件时都会点击API。下面是一个w你能做什么

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

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
图像源：[]
}
}
componentDidMount（）{
FileListFolder（{path:'}）。然后（函数（响应）{
const fileList=response.entries；
这是我的国家({
imageSource:fileList.map（file=>file.path\u下）；
})
});
}
render（）{
返回(
{this.state.imageSource.map（（image，i）=>）}
);
}
}

如果还没有图像，它将以这种方式渲染一个空的
div
。
更改：

1。不要在render方法中调用api，使用
componentDidMount
lifecycle方法

：

componentDidMount（）在创建组件后立即调用
已装入。需要DOM节点的初始化应转到此处。如果
需要从远程端点加载数据，这是一个好地方
实例化网络请求。此方法中的设置状态将
触发重新渲染

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

3.使用状态数组在render方法中生成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>
        );
    }
}

类Foo扩展了React.Component{
构造函数（）{
超级（）；
此.state={
图像源：[]
}
}
componentDidMount（）{
dbx.FileListFolder（{路径：'}）
。然后（（响应）=>{
让fileList=response.entries；
这是我的国家({
imageSource:文件列表
});
})
}
render（）{
if（！this.state.imageSource.length）
返回null；
让images=this.state.imageSource.map（（el，i）=>(
))
返回(
{图像}
);
}
}
我只会在您拥有映像后挂载该组件。因此，无论谁挂载该组件（父组件），应该获取图像然后装载组件。您不应该在
render
方法中完成所有这些工作。您在哪里更改状态？组件在更新状态后进行渲染。这是我很难理解的问题-如何使组件知道数组何时不再为空。请参阅Mayank Shukla answer。我认为这段代码不起作用，因为缺少绑定。@cloud\u traveler什么意思？缺少什么绑定？您需要将集合状态绑定到promise中的函数