设置了React状态，但在呈现

Question

1. 从Dropbox进行API调用
2. 从响应中过滤数据，并使用map将其存储到数组中。
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 });
    })
}