React map() 显示未定义答案

【问题标题】：React map() showing undefinedReact map() 显示未定义
【发布时间】：2023-03-21 05:19:02
【问题描述】：

我有一个项目，我使用 redux-saga 通过 axios 进行 API 调用并将数据返回到存储，然后我使用 redux mapStateToProps，现在我想 map() 它并在我的 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() 行并返回一个“hello”时，这个 console.log 显示数据正在返回

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

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

【问题讨论】：

标签： javascript reactjs redux redux-saga

【解决方案1】：

可能有 2 个问题。

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

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

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

【讨论】：

【解决方案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>
))

【讨论】：

【解决方案3】：

使用? 处理此错误。很可能错误来自传奇。您必须提供代码才能更好地提出解决方案。

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

【讨论】：

【解决方案4】：

像这样试试。

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

【讨论】：