Javascript React Redux操作和减速器映射错误

我对使用Redux还很陌生，我在尝试将action和reducer正确地连接到另一个组件时遇到了问题。所以我只是尝试一些简单的事情，比如在帖子中添加评论。用户输入他们的名字，然后输入他们的评论，我希望它同时显示两者。我正试图找到最好的方式写在我的减速机

这是我的行动

export const ADD_COMMENT = 'ADD_COMMENT';
export const addComment = (author, comment) => ({
 type: ADD_COMMENT,
  author,
  comment
});

这是我的评论

import React from 'react';
import {connect} from 'react-redux';
import CommentForm from './comment-form';

export function Comments(props) {
 const comments = props.comments.map((comment, index) => (
    <li key={index}>
        <div className="author">{comment.author} says:</div>
        <div className="comment">{comment.comment}</div>
    </li>
));
return (
    <section>
        <h2>Comments</h2>
        {comments.length ? <ul>{comments}</ul> : <div>No comments</div>}
        <h3>Add a comment</h3>
        <CommentForm />
    </section>
);
}

export const mapStateToProps = (state, props) => ({
comments: state.comments
});

export default connect(mapStateToProps)(Comments);

---

按照我现在的方式，我得到了一个“无法读取未定义的属性映射。我尝试将author:“”添加到我的初始状态，author:action.author在我的reducer中的函数中，但仍然是一样的。因此，我知道我的问题与我如何编写reducer有关。

下面的解决方案将帮助您从reducer获取注释，并在组件中呈现它（如果您有可用的注释），否则将不显示注释

此解决方案解决了以下问题，并在Comments.js、actions和reducer中进行了所有更正

无法读取未定义的属性映射

尝试将注释id添加为li元素的键，而不是索引。当您没有来自数据的唯一id时，索引应该始终是第二选择

更新：

您的文档中有输入错误，您需要调用action.comment，但您正在调用action.comments。检查下面更正的错误

import {ADD_COMMENT} from './actions';
const initialState = {
 comments: []
};

export default function(state = initialState, action){
  if(action.type === ADD_COMMENT){
    state.comments = action.comment;
    return state;
  }else{
     return state;
  }
}

更正了comments.js代码

import React from 'react';
import {connect} from 'react-redux';
import CommentForm from './comment-form';

export function Comments(props) {
return (
    <section>
        <h2>Comments</h2>
         <ul>
        {Array.isArray(props.comments) && props.comments.length > 0 && props.comments.map((comment, index) => (
      <li key={index}>
         <div className="author">{comment.author} says:              </div>
          <div className="comment">{comment.comment}</div>
        </li>
   ))}
    </ul>

    {!Array.isArray(props.comments) && <div>No comments</div>}
        <h3>Add a comment</h3>
        <CommentForm />
    </section>
);
}

const mapStateToProps = (state, props) => {
 return {"comments": state.comments}
};

export default connect(mapStateToProps)(Comments);

从“React”导入React；
从'react redux'导入{connect}；
从“./comment form”导入CommentForm；
导出功能注释（道具）{
返回(
评论

{Array.isArray（props.comments）&&props.comments.length>0&&props.comments.map（（comment，index）=>(

{comment.author}说：
{comment.comment}

))}

{！Array.isArray（props.comments）&&No comments}
添加评论
);
}
常量mapStateToProps=（状态、道具）=>{
返回{“comments”：state.comments}
};
导出默认连接（MapStateTops）（注释）；

不要出错。但是什么也没发生。文本输入字段被重置，但没有显示注释。确定当您执行console.log（props.comments）时，您在控制台中得到什么；你在这里得到数据了吗？没有。我没有定义。@D.Graves试着按照我在更新答案中的建议更新减速器。它应该工作我应该包括作者在我的减速机内的某个地方吗？你如何导入评论组件可能的重复

import React from 'react';
import {connect} from 'react-redux';
import CommentForm from './comment-form';

export function Comments(props) {
return (
    <section>
        <h2>Comments</h2>
         <ul>
        {Array.isArray(props.comments) && props.comments.length > 0 && props.comments.map((comment, index) => (
      <li key={index}>
         <div className="author">{comment.author} says:              </div>
          <div className="comment">{comment.comment}</div>
        </li>
   ))}
    </ul>

    {!Array.isArray(props.comments) && <div>No comments</div>}
        <h3>Add a comment</h3>
        <CommentForm />
    </section>
);
}

const mapStateToProps = (state, props) => {
 return {"comments": state.comments}
};

export default connect(mapStateToProps)(Comments);