React Redux 操作和 reducer 映射错误

Question

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

这是我的行动

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

这是我的 cmets.js

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);

这是我的 reducer.js

import {ADD_COMMENT} from './actions';

const initialState = {
 comments: []
};

export default function(state = initialState, action){
 if(action.type === ADD_COMMENT){
    return Object.assign({}, state, {
        comments: action.comments
    });
}

return state;
}

按照我现在的方式，我得到一个“无法读取未定义的属性映射。我尝试将作者：”添加到我的 initialState 和作者：action.author 在我的减速器的函数中，但仍然是同样的事情. 所以我知道我的问题与我如何编写减速器有关。

Answer 1

如果您有可用的 cmets，以下解决方案将帮助您从 reducer 获取 cmets 并将其渲染到组件中，否则将显示 no comments

此解决方案通过 Comments.js、actions 和 reducer 中所做的所有更正解决了以下问题

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

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

更新：

reducer 中有拼写错误，需要调用 action.comment，但调用的是 action.cmets。检查下面的更正

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;
  }
}

修正 cmets.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);