React map() 显示未定义

Question

我有一个项目，我使用 redux-saga 使用 axios 进行 API 调用并将数据返回到商店，然后我使用 redux mapStateToProps，现在我想 map() 它并将其显示在我的 DOM 上，但是我我得到“未定义”。

有两件事不断发生：

1. 要么数据没有被及时调用，渲染发生得很快，所以它说它是未定义的。
2. 我得到 map() 不是函数或 {blog.id} - id 未定义。

当我 console.log(blogs) 我看到我的博客数组所以我不确定我做错了什么。是不是因为 blogs 是一个数组，所以我需要做某种 for 循环来遍历每个项目然后映射它？

这是我的主要代码块和控制台日志

import React, {Component} from 'react';
import {connect} from 'react-redux'
import {loadBlogs} from '../../store/actions/blogActions'

class Bloglist extends Component {
    componentDidMount() {
        this.props.loadBlogs();
    }

    render() {
        const {blogs} = this.props
        console.log(blogs)
        return (
            <div>
                <h1>{blogs.map(blog => (
                    <span>{blog.id}</span>
                ))}</h1>
            </div>
        )
    }
}

const mapStateToProps = blogs => ({
    blogs
})
const mapDispatchToProps = dispatch => ({
    loadBlogs: () => dispatch(loadBlogs()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Bloglist)

这是一个控制台日志示例和一个错误：

Uncaught TypeError: blogs.map is not a function

这是当我刚刚注释掉 map() 行并返回一个“hello”时，这个 console.log 向我显示数据正在返回

Bloglist.js:14 (3) [{…}, {…}, {…}]

如果您需要更多样品或信息，请告诉我。完成这项工作非常重要，因此我们将不胜感激！谢谢！

Answer 1

可能有 2 个问题。

1. 请交叉检查博客的类型，它应该是数组，因为map方法仅适用于数组。

2. 在映射数组之前，您必须检查数组的长度。由于映射方法不适用于空数组。
   试试这个代码——

    <div>
        <h1>{blogs && blogs.length > 0 ? blogs.map(blog => (
            <span>{blog.id}</span>
        )) : null}</h1>
    </div>