反应 map() 显示未定义

Question

我有一个项目，我在其中使用 redux-saga 通过 axios 进行 API 调用并将数据 return 存储到商店，然后我使用 redux mapStateToProps 现在我想映射() 并显示在我的 DOM 上，但我得到“未定义”。

两件事不断发生：

要么数据没有及时调用，要么渲染速度很快，所以它说它未定义。
我得到 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() 行并且只是 return 一个“你好”，这个 console.log 告诉我数据正在返回

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

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

Answer 1

使用?来处理这个错误。错误很可能来自传奇。你必须提供代码更好地建议解决方案。

 <div>
                <h1>{blogs?.map(blog => (
                    <span>{blog.id}</span>
                ))}</h1>
            </div>

Answer 2

一开始，你的blogs不是数组。你应该更新你的 reducer initialState，默认设置 blocks 为一个空数组，就像

在reducer.js

const initialState = {
  blogs: [],
};

export default (state = initialState, action) => {
  switch(action) {
    case....

    default:
      return { ...state };
  } 
}

或者，您还应该在渲染前检查blogs。

Array.isArray(blogs) && blogs.map(item => (
  <div>
    {// item details goes here}
  </div>
))

Answer 3

可能有 2 个问题。

请核对一下博客的类型，应该是数组，因为map方法只适用于数组。

映射前必须检查数组的长度。由于 map 方法不适用于空数组。
试试这个代码 --

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

Answer 4

这样试试。

class Example extends Component {
   state:{}
   render(){
   //.....code
  }
}

反应 map() 显示未定义

React map() showing undefined

javascript

reactjs

redux

redux-saga