数组在组件状态中未定义（React）答案

【问题标题】：Array gets undefined in component state (React)数组在组件状态中未定义（React）
【发布时间】：2020-02-21 13:40:44
【问题描述】：

我有一个处于组件状态的数组，我想用来自 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>
            )

【问题讨论】：

this.state.documents.map
我改成了这个。但是渲染中仍然没有呈现任何内容。有什么问题？
谁说错了 - 您实际上是从 fetch 中接收到一个文档数组还是返回一个空数组？
在setState()前加一个console.log(data)，看看里面有什么数据。
@OskarPersson 那个控制台没有任何意义，你不能有一个具有两个相同键的对象 - 仔细看，你打错了什么吗？你能发布从服务器返回的实际响应（不要输入，复制粘贴）吗？

标签： javascript reactjs rest react-component

【解决方案1】：

这样写你的渲染

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

【讨论】：