问题描述
我非常难以更改商店和渲染组件。现在,我正在尝试制作一个具有注释的简单博客应用程序,每个注释都是一个对象,其对象嵌套在每个博客对象中。我知道这很可能是由于我的“ COMMENT”减速器引起的,但是我也会张贴我认为也是相关的组件。
这是博客状态的样子:
blogs: [
{
likes: 0,comments: [
{
author: 'Username1',user: '5f74f7a8323eed75cf95193b',content: 'This is a blog post!',createdAt: '2020-11-08 01:30:54',id: '5fa7bacef054babc8ecdd37c'
},{
author: 'Username1',],title: 'Blogtitle',author: 'Username1',url: 'siteurl',user: {
username: 'Username1',name: 'John Joseph',id: '5f74f7a8323eed75cf95193b'
},createdAt: '2020-11-08 01:30:51',id: '5fa7bacbf054babc8ecdd37b'
}
],
import blogService from '../services/blogs';
import { changeNotification } from './notificationReducer';
const blogReducer = (state = [],action) => {
switch (action.type) {
case 'INIT_BLOGS':
return action.data;
case 'ADD_BLOG': {
return [...state,action.data];
}
case 'LIKE': {
const idToLike = action.data.id;
const blogToLike = state.find((b) => b.id === idToLike);
const likedBlog = {
...blogToLike,likes: action.data.likes,};
return state.map((blog) => (blog.id !== idToLike ? blog : likedBlog));
}
case 'COMMENT': {
return state.map((blog) => {
if (blog.id === action.id) {
return { ...blog,comments: { ...action.data.comments } };
}
return blog;
});
}
case 'GET_COMMENTS': {
console.log(action.data);
return state;
}
case 'DELETE_BLOG': {
const filteredBlogs = state.filter((blog) => blog.id !== action.data._id);
return filteredBlogs;
}
default:
return state;
}
};
export const initializeBlogs = () => async (dispatch) => {
const blogs = await blogService.getAll();
console.log(blogs);
dispatch({
type: 'INIT_BLOGS',data: blogs,});
};
export const createBlog = (returnedBlog) => async (dispatch) => {
const newBlog = await blogService.create(returnedBlog);
dispatch({
type: 'ADD_BLOG',data: newBlog,});
};
export const likeBlog = (blogobject) => async (dispatch) => {
const updatedBlog = await blogService.put(blogobject);
console.log(updatedBlog);
await dispatch({
type: 'LIKE',data: updatedBlog,});
dispatch(changeNotification(`You liked ${blogobject.author}'s post`,3000));
};
export const addComment = (incomingComment,blogId) => async (dispatch) => {
const updatedBlog = await blogService.comment(incomingComment,blogId);
console.log(updatedBlog);
await dispatch({
type: 'COMMENT',});
};
export const getComments = (blogId) => async (dispatch) => {
const retrievedBlog = await blogService.getComments(blogId);
console.log(retrievedBlog);
await dispatch({
type: 'GET_COMMENTS',data: retrievedBlog,});
};
export const deleteBlog = (blogobject) => async (dispatch) => {
await blogService.remove(blogobject);
await dispatch({
type: 'DELETE_BLOG',data: blogobject,});
dispatch(
changeNotification(`You deleted the post title: ${blogobject.title}`,3000)
);
};
export default blogReducer;
以下是“评论”组件:
const Comments = ({ blog }) => {
const [comment,setComment] = useState('');
const user = useSelector((state) => state.user.id);
const dispatch = usedispatch();
const classes = commentStyles();
const createComment = (event,blogId) => {
event.preventDefault();
const date = moment().format('YYYY-MM-DD HH:mm:ss');
const newComment = { content: comment,user,createdAt: date };
dispatch(addComment(newComment,blogId));
dispatch(changeNotification(`Your comment has been added`,3000));
dispatch(initializeBlogs());
};
return (
<div>
<h3>Comments:</h3>
<form
onSubmit={(event) => {
createComment(event,blog.id);
}}
>
<input
type="text"
name="comment"
value={comment}
onChange={({ target }) => setComment(target.value)}
/>
<button type="submit">add comment</button>
</form>
<hr />
{blog.comments.map((c,i) => (
<div
style={{ borderBottom: '1px solid black',marginBottom: '1em' }}
key={i}
className={classes.comment}
>
<p className={classes.author}>
{c.author} <span>{moment(c.createdAt).fromNow()}</span>
</p>
<p>{c.content}</p>
</div>
))}
</div>
);
};
const mapStatetoProps = (state,ownProps) => ({
user: state.user,});
export default connect(mapStatetoProps)(Comments);
哪个是BlogView的孩子:
const BlogView = ({ blog,user }) => {
const dispatch = usedispatch();
const history = useHistory();
const howLongAgo = moment(blog.createdAt,'YYYY-MM-DD HH:mm:ss').fromNow();
const like = () => {
const likedBlog = {
user: blog.user.id,likes: blog.likes,author: blog.author,title: blog.title,url: blog.url,_id: blog.id,};
dispatch(likeBlog(likedBlog));
};
const remove = () => {
if (blog.user.id !== user.id) {
dispatch(
changeNotification(
`You are not authorized to delete this post`,3000,true
)
);
return;
}
if (window.confirm(`Do you really want to delete "${blog.title}"?`)) {
const blogobject = {
user: blog.user.id,};
history.push('/');
dispatch(deleteBlog(blogobject));
}
};
return (
<div>
<h1>{blog.title}</h1>
<p>
<a href={blog.url}>{blog.url}</a>
</p>
<br />
<p>
Likes: {blog.likes}
<button onClick={like} type="button">
like
</button>
</p>
<p>
added by <Link to={`/users/${blog.user.id}`}>{blog.author}</Link> at{' '}
{howLongAgo}
</p>
<button onClick={remove} type="button">
delete
</button>
<hr />
<div>
<h3>{blog.title}</h3>
<br />
<p>This is the blog's content.</p>
</div>
<Comments blog={blog} />
</div>
);
};
const mapStatetoProps = (state) => ({
user: state.user,});
export default connect(mapStatetoProps)(BlogView);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)