我正在尝试从数组中删除一个项目,redux 记录器显示一切顺利。
但是,在我单击 x 后,它仍然显示在有序列表下。
Reducer/posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
组件/TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className="list-group">
{posts.map(post=>
<li
className="list-group-item" key={post.id} {...post}> {post.text}
<button type="submit" onClick={()=> deletePost(post.id)} className =" btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
已更新。
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
最佳答案
你的代码中有一个小错误
您已分派(dispatch)的操作是 DELETE_POST
,而您期望在代码中使用 REMOVE_POST
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
关于javascript - Redux 调度不会从数组中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53425297/