數組在組件狀態中未定義（React）

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，但現在無論如何都沒有顯示任何內容，也沒有任何錯誤。 我錯過了什么？

編輯 #2：通過在 render() 中編寫以下代碼來解決它：

        return (
            <ul>
                {this.state.documents.map((document) => (
                    <li key={document.id}>{document.name}</li>))}
            </ul>
            )

Answer 1

像這樣寫你的渲染

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