如何更新減速器中的特定嵌套項？

Question

我有一個具有以下結構的減速器：

{
    "id": 8,
    "location_name": "Some place",
    "lat": "nn.nnnnnn",
    "lng": "-nn.nnnnn",
    "review_count": 3,
    "score_avg": 3.00,
    "reviews": [
        {
            "id": 14,
            "userId": 1,
            "userName": "JohnDoe",
            "body": "Lorem Ipsum.",
            "score": null,
            "likes": 2,
            "liked": true,
            "review_pic": null
        },
        {
            "id": 15,
            "userId": 1,
            "userName": "JohnDoe",
            "body": "Lorem Ipsum.",
            "score": null,
            "likes": 0,
            "liked": false,
            "review_pic": null
        },
        {
            "id": 13,
            "userId": 4,
            "userName": "JohnDoe",
            "body": "Lorem Ipsum.",
            "score": null,
            "likes": 0,
            "liked": false,
            "review_pic": null
        }
    ]
}

另一方面，我有一個返回 ID 的動作創建者。 我正在嘗試獲取此 ID 以將 like 更改為 true 並設置 likes+1，但此減速器 state 的嵌套性質讓我失望。

編輯：這是我一直在嘗試使用減速器但沒有運氣的方法：

import {GET_REVIEWS, CLEAR_REVIEWS, LIKE} from './reviewTypes';

const initialState = [];

const reviewReducer = (state = initialState, action) => {
    switch(action.type) {
        case GET_REVIEWS:
            return action.payload;
        case LIKE:
           const reviews = state.reviews.map(review => {
               if(review.id === action.payload) {
                   return {
                       ...review,
                       liked: true,
                       likes: review.likes++
                   }
               } else {
                   return review;
               }
           });
           return {
               ...state,
               reviews
           }
        case CLEAR_REVIEWS:
            return [];
        default:
            return state;
    }
}

export default reviewReducer;

Answer 1

我使用Array#some遍歷 array.reviews 以找到具有所需 ID 的評論。 如果我找到它而不是增加喜歡並將喜歡設置為 true，

 function updateLike(id, array) { array.reviews.some(review => { if (review.id==id) { review.likes++; review.liked = true; return true; } }); } let array = { "id": 8, "location_name": "Some place", "lat": "nn.nnnnnn", "lng": "-nn.nnnnn", "review_count": 3, "score_avg": 3.00, "reviews": [ { "id": 14, "userId": 1, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 2, "liked": true, "review_pic": null }, { "id": 15, "userId": 1, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 0, "liked": false, "review_pic": null }, { "id": 13, "userId": 4, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 0, "liked": false, "review_pic": null } ] }; updateLike(15, array); console.log(array);

Answer 2

您可以使用Array#find來獲取具有特定id的元素。

 const data = { "id": 8, "location_name": "Some place", "lat": "nn.nnnnnn", "lng": "-nn.nnnnn", "review_count": 3, "score_avg": 3.00, "reviews": [ { "id": 14, "userId": 1, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 2, "liked": true, "review_pic": null }, { "id": 15, "userId": 1, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 0, "liked": false, "review_pic": null }, { "id": 13, "userId": 4, "userName": "JohnDoe", "body": "Lorem Ipsum.", "score": null, "likes": 0, "liked": false, "review_pic": null } ] }; let id = 13; let obj = data.reviews.find(x => x.id === id); if(obj) obj.liked = true; console.log(data);

Answer 3

你不必在那個上使用reducer，因為你只有一個數組，你應該可以使用useState，這段代碼應該適合你。

const onItemLike = (itemID) => {
          setState(state.map(x => {
               if(reviews.id === itemID)
               return {...x, liked: true, likes: state.reviews[x].likes+1}
          }))
     }