javascript - React Redux 操作和 reducer 映射错误

Question

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

这是我的 Action

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

这是我的 comments.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;
}

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

Answer 1

下面的解决方案将帮助您从 reducer 获取评论，如果您有评论可用，则将其呈现在组件中，否则将显示无评论

此解决方案通过在 Comments.js、操作和 reducer 中进行的所有更正解决了以下问题

Cannot read property map of undefined

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

更新:

你在 reducer 中有错字，你需要调用 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);