使用 reducer 更新狀態內的特定值

Question

我正在嘗試更新狀態內的對象數組內的特定值（在本例中為列表內的注釋） 。 在這種情況下， 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 {...}
        }
      }        
        )

我無法獲得使用減速器更新我想要的數據的答案/解決方案，如果有人可以幫助我解決問題，我將不勝感激。 提前致謝，周末愉快：）

Answer 1

如果我理解正確，您想要更新任何給定state項上的任何嵌套msg評論（我假設它與您的問題中顯示的列表形式匹配） - 在這種情況下，一個簡單的解決方案可能如下：

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形式的list ，如您的問題所示
• 您的操作負載中的commentId對msg子數組中的評論是唯一的。
• 您的操作負載中的comment字段包含新的評論字符串以更新現有的匹配評論

希望有幫助！

Answer 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; }) } }))

Answer 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;