使用 reducer 更新状态内的特定值答案

【问题标题】：Update an specific value inside the state with the reducer使用 reducer 更新状态内的特定值
【发布时间】：2020-04-07 08:46:33
【问题描述】：

我正在尝试更新状态内的对象数组内的特定值（在本例中为列表内的注释）。在这种情况下，msgs 键内的注释。

 const list = [{
    id: 1,
    text: "list text",
    msgs: [{
      id: 1,
      comment: "comment",
      commentID: "ab37afa-c17-e4f-f103-4715b72f14ec"
    }]
  },
  {
    id: 2,
    text: "list text 2",
    msgs: [{
      id: 2,
      comment: "comment2", <--- trying to update this value
      commentID: "ab37afa-c17-e4f-f103-4715b72f14ec-2"
    },
    {
      id: 2,
      comment: "comment3",
      commentID: "ab37afa-c11323127-e4f-f103-4715b72f14ec-2"
    }]
  }
];

我目前正在尝试使用减速器：

case "EDIT_COMMENT":
      temp = state.filter((list => list.id === parseInt(action.comment.id)))  //getting the list that I want
      const msgs = [].concat(...temp).map(x=> ({
        id: x.id,
        comment : x.comment,
        commentID : x.commentID
        })) // trying to get the messages inside the state


     // I honestly don't know what to put here
      return msgs.map( msg => {
        if(msg.commentID === action.payload.commentID){
          return {...}
        }
      }        
        )

我无法获得使用减速器更新我想要的数据的答案/解决方案，如果有人可以帮助我解决问题，我将不胜感激。提前谢谢，周末愉快：）

【问题讨论】：

为什么你的 id 不是唯一的？
@larz 我在 msgs 中创建了密钥 ID，因为我不知道如何访问它，我不知道我现在正在尝试做的事情是否有必要。每条评论都有自己独特的评论ID。设置这样的结构是不好的？？？。感谢您的评论

标签： javascript arrays reactjs object redux

【解决方案1】：

如果我理解正确，您希望在state 的任何给定项目上更新任何嵌套的msg 评论（我认为它与您问题中显示的列表的形式相匹配） - 在这种情况下，a简单的解决方案可能如下：

case "EDIT_COMMENT": {

  return state.map(messageItem => {

    return {
      // Clone input messageItem
      ...messageItem,

      // Overwrite msgs field with new msgs array
      msgs : messageItem.msgs.map(commentItem => {

        if(commentItem.commentID === action.payload.commentID) {
          return {
            // Clone input commentItem
            ...commentItem,

            // Overwrite fields that this action should update,
            // on commentItem matching by comment id ie, "comment"
            // from action payload
            comment : action.payload.comment
          }      
        }
        else {
          // If message does not match actions comment id, return
          // a clone of commentItem to mapped list
          return {...commentItem}
        }
      })
    }    
  });
}

这里的假设是：

state 是一个与list 形式匹配的数组，如您的问题所示
动作负载中的commentId 对msg 子数组中的注释是唯一的。
您的操作负载中的 comment 字段包含新的评论字符串以更新现有的匹配评论

希望有帮助！

【讨论】：

【解决方案2】：

您想映射所有内容，按原样返回，除非它与 action.payload.commentID 匹配。如果匹配，则按原样返回 THAT，但更新评论除外。

const list = [{
    id: 1,
    text: "list text",
    msgs: [{
      id: 1,
      comment: "comment",
      commentID: "ab37afa-c17-e4f-f103-4715b72f14ec"
    }]
  },
  {
    id: 2,
    text: "list text 2",
    msgs: [{
      id: 2,
      comment: "comment2", // <--- trying to update this value
      commentID: "ab37afa-c17-e4f-f103-4715b72f14ec-2"
    },
    {
      id: 2,
      comment: "comment3",
      commentID: "ab37afa-c11323127-e4f-f103-4715b72f14ec-2"
    }]
  }
];

const action = {
  payload: {
    commentID: 'ab37afa-c17-e4f-f103-4715b72f14ec-2',
    comment: 'Updated Comment',
  }
}

console.log(list.map(listItem => {
  return {
    ...listItem,
    msgs: listItem.msgs.map(msg => {
      if (msg.commentID === action.payload.commentID) {
        return {
          ...msg,
          comment: action.payload.comment
        }
      }
      return msg;
    })
  }
}))

【讨论】：

【解决方案3】：

这个怎么样？（我只是编好了动作的结构）

case "EDIT_COMMENT":
    return state.map((list) => {
        if (list.id === parseInt(action.listId) {
            list.msgs = list.msgs.map((msg) => {
                if (msg.id === action.commentId) {
                    msg.comment = action.comment;
                }
                return msg;
            }
        }
        return list;
    });
    break;

【讨论】：