无法读取react / redux中未定义的属性“ map”

Question

在添加地图功能之前，我正在获取状态

添加地图功能后，我得到了。

我无法查明问题的位置。在stackoverflow上看到了很多帖子，但都没有解决我的问题

import React,{Fragment,useEffect} from 'react'
import PropTypes from 'prop-types'
import PostItem from './PostItem'
import {connect} from 'react-redux'
import {getPosts} from '../../actions/post'
import Spinner from '../layout/spinner'


const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
           {
               posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div>

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post
})

export default connect(mapStateToProps,{getPosts})(Posts)

Answer 1

您必须先调用posts，然后再调用map函数，以防止在将数据传递到props之前调用它。像这样posts && posts.map(() => {})

import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import PostItem from "./PostItem";
import { connect } from "react-redux";
import { getPosts } from "../../actions/post";
import Spinner from "../layout/spinner";

const Posts = ({ getPosts, post: { posts, loading } }) => {
  useEffect(
    () => {
      getPosts();
    },
    [getPosts]
  );

  return loading ? (
    <Spinner />
  ) : (
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
        <i className="fas fa-user" />Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
        {posts &&
          posts.map(post => {
            return <PostItem key={post._id} post={post} />;
          })}
      </div>
    </Fragment>
  );
};

Posts.propTypes = {
  getPosts: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post
});

Answer 2

在映射之前，您需要使用条件来检查值，以避免错误。

1 -{posts？posts.map（）：null}

2 -{帖子&& posts.map（）}

 <Fragment>
          <h1 className="large text-primary">Posts</h1>
          <p className="lead">
              <i className="fas fa-user"></i>Welcome to the community
          </p>
          {/* PostForm*/}
          <div className="posts">
               {
                   posts?posts.map((post)=>{
                       return <PostItem key={post._id} post={post} />
                   }):null
               }
          </div>

        </Fragment>

或

<Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      <div className="posts">
           {
               posts && posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div>

    </Fragment>

Answer 3

您可以执行以下代码。

import React,{Fragment,useEffect} from 'react'
import PropTypes from 'prop-types'
import PostItem from './PostItem'
import {connect} from 'react-redux'
import {getPosts} from '../../actions/post'
import Spinner from '../layout/spinner'


const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      {posts.length ? 
      <div className="posts">
           {
               posts.map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div> : }

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post
})

export default connect(mapStateToProps,{getPosts})(Posts)

Answer 4

const Posts = ({ getPosts, post: { posts, loading } })=>{
useEffect(()=>{
    getPosts();
},[getPosts])

return loading ?<Spinner/>:(
    <Fragment>
      <h1 className="large text-primary">Posts</h1>
      <p className="lead">
          <i className="fas fa-user"></i>Welcome to the community
      </p>
      {/* PostForm*/}
      {posts.length ? 
      <div className="posts">
           {
               (posts || []).map((post)=>{
                   return <PostItem key={post._id} post={post} />
               })
           }
      </div> : }

    </Fragment>
)
}


Posts.propTypes={
 getPosts:PropTypes.func.isRequired,
 post:PropTypes.object.isRequired,
}

const mapStateToProps=state=>({
  post:state.post || [],
})

export default connect(mapStateToProps,{getPosts})(Posts)