Question

我有一个项目，我在其中使用redux-saga使用axios进行API调用并将数据返回到商店，然后我使用redux映射了mapStateToProps，现在我想对其进行map（）并显示在DOM上，但我得到“未定义”。

两件事不断发生：

要么没有及时调用数据，要么渲染速度很快，所以它说它是未定义的。
我的map（）不是函数或{blog.id}的函数-id未定义。

当我console.log（blogs）时，我看到了一系列博客，所以我不确定自己在做什么错。是因为博客是一个数组，所以我需要进行某种for循环以遍历每个项目，然后将其映射？

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

 axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
  .then((res) => {
    if (res.data.email_does_not_exists) {
          this.showError = true
    } else {
      document.querySelector('form').submit()
    }
  });

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

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)

这是当我仅注释掉map（）行并仅返回“ hello”时，此console.log向我显示数据正在返回

Uncaught TypeError: blogs.map is not a function

如果您需要更多样品或信息，请告诉我。做到这一点非常重要，因此我们将不胜感激！谢谢！

Answer 1

开头，您的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 2

可能有2个问题。

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

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

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

Answer 3

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

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

Answer 4

试试这个。

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

反应map（）显示未定义

4 个答案: