Arrays React Array.map不将JSON数据识别为数组

这可能是一个非常简单的修复方法，但我无法理解为什么map函数不能将输入识别为数组

我有一个两难模型，其中包含一系列用户评论。我获取数据并将其映射到react组件的状态。然后，我尝试将数据解析为一个子组件的道具，在子组件中我尝试映射数据

const initialState = {
  loading: false,
  dilemma: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_DILEMMA:
      return {
        ...state,
        dilemma: action.payload,
        loading: false
      };
    case GET_DILEMMAS:
      return {
        ...state,
        dilemmas: action.payload,
        loading: false
      };
    case CREATE_DILEMMA:
      return {
        ...state,
        dilemmas: [action.payload, ...state.dilemmas]
      };
    case DELETE_DILEMMA:
      return {
        ...state,
        dilemmas: state.dilemmas.filter(
          dilemma => dilemma._id !== action.payload
        )
      };
    case DILEMMAS_LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
}

this.props在有状态组件中

{
  "match": { "path": "/", "url": "/", "isExact": true, "params": {} },
  "location": { "pathname": "/", "search": "", "hash": "", "key": "crpcmj" },
  "history": {
    "length": 50,
    "action": "POP",
    "location": { "pathname": "/", "search": "", "hash": "", "key": "crpcmj" }
  },
  "dilemmas": {
    "loading": false,
    "dilemma": {
      "red_votes": 0,
      "blue_votes": 0,
      "_id": "5b855fcbdfa436e0d25765fa",
      "user": "5b855f9fdfa436e0d25765f9",
      "prefix": "Hvis du skulle vælge",
      "title": "Svede remoulade",
      "red": "Gå med rustning resten af dit liv",
      "blue": "Svede remoulade resten af dit liv",
      "likes": [],
      "comments": [
        {
          "date": "2018-08-28T17:28:23.340Z",
          "_id": "5b858637b6f6a6e6218eeaba",
          "user": "5b855f9fdfa436e0d25765f9",
          "text": "This is a test3 comment",
          "author": "Albyzai"
        },
        {
          "date": "2018-08-28T17:28:19.915Z",
          "_id": "5b858633b6f6a6e6218eeab9",
          "user": "5b855f9fdfa436e0d25765f9",
          "text": "This is a test2 comment",
          "author": "Albyzai"
        },
        {
          "date": "2018-08-28T15:50:18.792Z",
          "_id": "5b856f3aed156de48a270766",
          "user": "5b855f9fdfa436e0d25765f9",
          "text": "This is a test comment",
          "author": "Albyzai"
        }
      ],
      "date": "2018-08-28T14:44:27.413Z",
      "slug": "svede-remoulade",
      "__v": 3
    }
  },
  "errors": {}
}

有状态组件

import React, { Component } from "react";
import propTypes from "prop-types";
import { connect } from "react-redux";
import { getDilemma, addLike, removeLike } from "../../actions/dilemmaActions";

import Dilemma from "./../dilemma/Dilemma";
import Divider from "./../dilemma/Divider";
import CommentFeed from "../dilemma/CommentFeed";

class DilemmaLayout extends Component {
  constructor() {
    super();
    this.state = {
      title: "",
      prefix: "",
      red: "",
      blue: "",
      red_votes: 0,
      blue_votes: 0,
      likes: [],
      comments: [],
      errors: {}
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.dilemmas.dilemma) {
      const dilemma = nextProps.dilemmas.dilemma;

      this.setState({
        id: dilemma._id,
        user: dilemma.user,
        title: dilemma.title,
        prefix: dilemma.prefix,
        red: dilemma.red,
        blue: dilemma.blue,
        red_votes: dilemma.red_votes,
        blue_votes: dilemma.blue_votes,
        likes: [dilemma.likes],
        comments: [dilemma.comments]
      });
    }
  }

  render() {
    return (
      <div>        
        <CommentFeed comments={this.state.comments} />
      </div>
    );
  }
}

DilemmaLayout.propTypes = {
  getDilemma: propTypes.func.isRequired,
  addLike: propTypes.func.isRequired,
  removeLike: propTypes.func.isRequired,
  dilemmas: propTypes.object.isRequired
};

const mapStateToProps = state => ({
  dilemmas: state.dilemmas,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { getDilemma, addLike, removeLike }
)(DilemmaLayout);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“react redux”导入{connect}；
从“./../actions/DillemaActions”导入{GetDillestice，addLike，removeLike}”；
从“/。/困境/困境”导入困境；
从“/./困境/分割器”导入分割器；
从“./困境/CommentFeed”导入CommentFeed；
类困境布局扩展组件{
构造函数（）{
超级（）；
此.state={
标题：“，
前缀：“”，
红色：“，
蓝色：“，
红色联盟投票：0，
蓝票：0，
喜欢：[]，
评论：[]，
错误：{}
};
}
组件将接收道具（下一步）{
if（nextrops.errors）{
this.setState（{errors:nextrops.errors}）；
}
如果（下一步。困境。困境）{
const diplex=nextrops.dilemmas.dilemmas；
这是我的国家({
id：进退两难，
用户：diffuse.user，
标题：困境，标题，
前缀：diffuse.prefix，
瑞德：困境，瑞德，
蓝色：两难，蓝色，
红色选票：两难。红色选票，
蓝票：两难。蓝票，
喜欢：[进退两难，喜欢]，
评论：[困境。评论]
});
}
}
render（）{
返回(
);
}
}
困境布局.propTypes={
GetDifficle:propTypes.func.isRequired，
addLike:propTypes.func.isRequired，
removeLike:propTypes.func.isRequired，
困境：propTypes.object.isRequired
};
常量mapStateToProps=状态=>({
困境：国家，困境，
错误：state.errors
});
导出默认连接(
MapStateTops，
{getdiffuse，addLike，removeLike}
)（进退两难的布局）；

功能组件接收道具

import React from "react";
import Comment from "./Comment";
import { Container } from "reactstrap";

const CommentFeed = comments => {
  const commentArray = comments.map(comment => {
    <Comment author={comment.author} text={comment.text} />;
  });

  return <Container>{commentArray}</Container>;
};

export default CommentFeed;

从“React”导入React；
从“/Comment”导入注释；
从“reactstrap”导入{Container}；
const CommentFeed=注释=>{
const commentArray=comments.map（comment=>{
;
});
返回{commentArray}；
};
导出默认源；

尝试使用类似ES6的工具从

CommentFeed

组件上的

props

中提取/解压缩prop

注释。之所以需要这样做，是因为
comments
数组不是直接传递给组件的，而是将
props
对象传递给包含
comments
属性的组件

const CommentFeed = ({ comments }) => {
  const commentArray = comments.map(comment =>
    <Comment author={comment.author} text={comment.text} />;
  );

  return <Container>{commentArray}</Container>;
};

此外，无法从所提供的内容中进行判断，但以下状态设置可能会导致问题，原因有两个：

componentWillReceiveProps(nextProps) {
  if (nextProps.errors) {
    this.setState({ errors: nextProps.errors });
  }

  if (nextProps.dilemmas.dilemma) {
    const dilemma = nextProps.dilemmas.dilemma;

    this.setState({
      // ...
      likes: [dilemma.likes],
      comments: [dilemma.comments]
    });
  }
}

If
diffuse.likes
是一个数组。你要么只需要
likes:diffuse.likes
要么
likes:[…diffuse.likes]
If
diffuse.comments
是一个数组。您或者只需要
comments:dimension.comments
或者
comments:[…dimension.comments]
创建嵌套数组时可能会出现问题，如
[[]]
，这会导致您在
CommentFeed
组件中的
comments.map（）
中描述的错误，因为
map（）
将尝试访问嵌套数组项的属性
author
，如
[{“author:“Albyzai”}].author

考虑到将来将不推荐使用这些属性，为什么不直接使用来自存储区的
注释
和其他属性来传递给子组件或渲染？您在评论中提到，在初始渲染时，各种道具未定义/为空。您可能需要在存储状态下使用
加载
属性，并结合某种条件呈现

render() {
  const { dilemmas, errors } = this.props;

  if (errors) {
    return <div>{errors}</div>;
  } else if (!dilemmas.dilemma || dilemmas.loading) {
    return <div>Loading...</div>;
  } else {
    return <CommentFeed comments={dilemmas.dilemma.comments} />;
  }
}

render（）{
const{dilemmas，errors}=this.props；
如果（错误）{
返回{errors}；
}否则如果（！dilemmas.dilemmas | | dilemmas.load）{
返回装载。。。；
}否则{
返回；
}
}

我已经创建了一个在基本级别上显示此功能的应用程序

希望这有帮助
 尝试使用ES6之类的工具从
CommentFeed
组件上的
props
中提取/解压缩prop
注释。之所以需要这样做，是因为
comments
数组不是直接传递给组件的，而是将
props
对象传递给包含
comments
属性的组件

const CommentFeed = ({ comments }) => {
  const commentArray = comments.map(comment =>
    <Comment author={comment.author} text={comment.text} />;
  );

  return <Container>{commentArray}</Container>;
};

此外，无法从所提供的内容中进行判断，但以下状态设置可能会导致问题，原因有两个：

componentWillReceiveProps(nextProps) {
  if (nextProps.errors) {
    this.setState({ errors: nextProps.errors });
  }

  if (nextProps.dilemmas.dilemma) {
    const dilemma = nextProps.dilemmas.dilemma;

    this.setState({
      // ...
      likes: [dilemma.likes],
      comments: [dilemma.comments]
    });
  }
}

If
diffuse.likes
是一个数组。你要么只需要
likes:diffuse.likes
要么
likes:[…diffuse.likes]
If
diffuse.comments
是一个数组。您或者只需要
comments:dimension.comments
或者
comments:[…dimension.comments]
创建嵌套数组时可能会出现问题，如
[[]]
，这会导致您在
CommentFeed
组件中的
comments.map（）
中描述的错误，因为
map（）
将尝试访问嵌套数组项的属性
author
，如
[{“author:“Albyzai”}].author

考虑到将来将不推荐使用这些属性，为什么不直接使用来自存储区的
注释
和其他属性来传递给子组件或渲染？您在评论中提到，在初始渲染时，各种道具未定义/为空。你会