变化：

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

组件DidMount :

componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该在这里进行。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

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

3.使用状态数组在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>
        );
    }
}

您应该使用组件的 state 或 props，以便在数据更新时重新渲染。对 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这种方式渲染一个空的。

首先，您应该使用组件的状态而不是使用全局定义的变量。

因此，为了避免显示带有空图像数组的组件，您需要在组件上应用有条件的“加载”类，并在数组不再为空时将其删除。