如何在我的减速器中更新特定的嵌套项目？

问题描述

我的减速器具有以下结构：

{
    "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,"likes": 0,"liked": false,{
            "id": 13,"userId": 4,"review_pic": null
        }
    ]
}

另一方面，我有一个返回ID的动作创建者。我正在尝试获取此ID，以将Likes更改为true并设置likes + 1，但是该reducer状态的嵌套性质使我感到震惊。

编辑：这是我一直在尝试使用我的减速器的运气：

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;

解决方法

我使用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,"likes": 0,"liked": false,{
            "id": 13,"userId": 4,"review_pic": null
        }
    ]
};

updateLike(15,array);
console.log(array);

,

您可以使用https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/来获取具有特定id的元素。

const data = { "id": 8,"reviews": [ { "id": 14,"review_pic": null },{ "id": 15,{ "id": 13,"review_pic": null } ] };
let id = 13;
let obj = data.reviews.find(x => x.id === id);
if(obj) obj.liked = true;
console.log(data);

,

您不必在那一个上使用reducer，因为您只有一个数组，并且useState应该很好，所以这段代码应该对您有用。

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