React 上下文 API - Reducer 编辑整个对象而不是其属性

Question

所以我在我的状态下有一系列帖子，每个 post 是这样的：

{
    "likes": 1,
    "comments": [],
    "_id": "5f3eb143167cbe1014ecdf3d",
    "user": {
        "_id": "5f39496b7e78810b801b3ff8",
        "name": "jon doe"
    },
    "title": "post 1",
    "img_url": "https://url.com",
    "date": "2020-08-20T17:22:11.324Z",
    "__v": 1
}

我有一个功能喜欢我的操作中的 post，这里是：

    const postAddLike = async (id) => {
        try {
            const res = await axios.put(`/api/posts/like/${id}`)
            console.log(res.data)
            dispatch({
                type: POST_ADD_LIKE,
                payload: res.data
            })
            
        } catch (err) {
        
        }
    }

API 运行良好，它确实像 post，但我的减速器做了其他事情，这里是减速器：

case POST_ADD_LIKE:
            return {
                ...state,
                allPosts : state.allPosts.map(post => post._id === action.payload._id ? post.likes = post.likes+1 : post = post)
            }

（allPosts 是我的上下文状态中 post 的数组），

我的减速器所做的是用'1'替换我的整个对象我猜它来自减速器中的'+1'，我只是想要的是 'likes' 属性递增. 任何人来帮助！提前致谢 :D

Answer 1

你可以试试这样的

allPosts: state.allPosts.map(post => post._id === action.payload._id ? { ...post, likes: post.likes+1 } : post);

虽然我会说像这样格式化它会使它更容易阅读

allPosts: state.allPosts.map(post => (
  ...post,
  likes: post.likes + (post._id === action.payload._id ? 1: 0),
)

React 上下文 API - Reducer 编辑整个对象而不是其属性

React Context API - Reducer editing whole object instead of its property

reactjs

react-context

React 上下文 API - Reducer 编辑整个对象而不是其 属性

React Context API - Reducer editing whole object instead of its property

reactjs

react-context

React 上下文 API - Reducer 编辑整个对象而不是其属性