作出反应状态设置，但它看起来像它渲染

Question

1. 使从响应数据从Dropbox的
API调用
2. 滤波器，并利用地图存储到一个数组的时候是空的。
3. 设置阵列作为一个国家
4. 使用它，而渲染

所以这基本上就是我想要做的事情 - 尝试使用Dropbox的API，使照相馆 - ，我相信我成功到3号，因为当我console.log数组状态，它显示的内容。但是，当我尝试打印它的长度时，它显示0，我甚至无法在渲染时使用它 - 它显示为未定义的对象。

我会附上开发工具的代码和图片。请帮帮我！ :(

JS文件

let dbx = new Dropbox();  

class Thumbnails extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      thumbnails: [] 
     }; 
    } 

    componentDidMount() { 
     let thumbnailsArray = []; 
     this.props.travel.map(file => { 
      dbx.filesGetTemporaryLink({ path: file }) 
      .then(res => { 
       thumbnailsArray.push(res.link); 
      }); 
     }); 
     this.setState({ thumbnails: thumbnailsArray }); 
    } 

    render() { 
     console.log(this.state.thumbnails); 
     console.log(this.state.thumbnails.length); 
     console.log(this.state.thumbnails[5]); 
     if (this.state.thumbnails.length < 1) {return <p>Loading...</p>} 
     return(
      <table id="thumbnails"> 
       <tbody> 
        <tr> 
         <td src={{backgroundImage: `${this.state.thumbnails[5]}`}}></td> 
         {this.state.thumbnails.map(thumbnail => { 
          return (<td style={{backgroundImage: `${thumbnail}`}}></td>); 
         })} 
        </tr> 
       </tbody> 
      </table> 
     ); 
    } 


} 

开发工具时的console.log已运行

Answer 1

您有异步代码。当你设置时的阵列为空的问题。您可以使用Promise.all在设置新状态之前等待所有请求完成。

componentDidMount() { 
    Promise.all(this.props.travel.map(file => { 
     return dbx.filesGetTemporaryLink({ path: file }) 
      .then(res => res.link); 
    })).then(thumbnailsArray => { 
     this.setState({ thumbnails: thumbnailsArray }); 
    }) 
}