数组在组件状态（反应）变得未定义

Question

我有一个处于组件状态的数组，我想用来自API调用的一些数据来填充。问题在于，显然总是将其设置为“未定义”，因此我无法对其执行任何功能/无法在DOM中显示数据。

这是我现在的代码：

class DocumentsPage extends Component {

    constructor(props) {
        super(props);
        this.state = { documents: [] };
    }

    componentDidMount() {
        this.getDocuments();
    }

    getDocuments = (e) => {
        fetch('api/GetDocuments').then(documents =>
            documents.json()).then(data => {
                this.setState({
                    documents: data
                });
            })
    }

    render() {
        return (
            <div>
                {this.state.documents.map(document => <div> {document} </div>)}
            </div>
            )
    }
} 

但是尝试显示数据时出现此错误：“ TypeError：无法读取未定义的属性'map'。我究竟做错了什么？

编辑：我更改为this.state.documents.map，但是现在仍然没有任何提示，也没有任何错误。我想念什么？

Answer 1

调用map()之前需要检查文档值是否大于0

this.state.documents.length > 0 ? this.state.documents.map() : null

Answer 2

这样写渲染图

render() {
    return (
        <div>
            {this.state.documents && this.state.documents.map(document => <div> {document} </div>)}
        </div>
        )
}