我对使用Redux和Im还是很陌生,试图将我的动作和reducer正确地绑定到另一个组件时遇到了问题。因此,我只是尝试一些简单的操作,例如在帖子中添加评论。用户键入他们的名字,然后输入他们的评论,我希望两者都显示。我试图找到在我的减速器中编写此代码的最佳方法。
这是我的行动
export const ADD_COMMENT = 'ADD_COMMENT';
export const addComment = (author, comment) => ({
type: ADD_COMMENT,
author,
comment
});
这是我的comment.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;
}
我现在拥有的方式,我在我的reducer的函数中得到了一个“无法读取未定义的属性映射。我尝试将author:添加到我的初始状态和author:action.author中,并且仍然是同一件事。所以我知道我的问题与我如何编写我的减速器有关。
答案 0 :(得分:0)
以下解决方案将帮助您从减速器中获取注释并将其呈现在组件中(如果您有可用注释),否则将显示no comments
此解决方案通过对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);