JavaScript 中 Map 的传播语法-解网

问：

在我的 React 项目（聊天应用程序）中，我正在使用，我想用代替 as 状态。redux toolkitMapobject literal {}

chatMap state包含 contactId（）作为键，包含聊天数组作为值。mongodb _id

类似的东西——

chatMap =
{
   [contactId1]: [chatsArr1],
   [contactId2]: [chatsArr2]
}

（chatSlice.js）

const initialState = {
   chatMap: new Map(),
   ...
}

reducers: {
      setChatMap: (state, action) => {
         state.chatMap = {...chatMap, key1: action.payload}
      },
      ...
}

如何更新 chatMap （Map）状态？

javascript react-redux 对象文字

评论

0赞 phry 2/17/2023

请注意，我们通常建议不要将 Maps 等类实例存储在 Redux 商店中 - 请参阅有关此的样式指南：redux.js.org/style-guide/...

答：

1赞 msx47 2/17/2023 #1

你可以做这样的事情。

reducers: {
      setChatMap: (state, action) => {
         state.chatMap = new Map(state.chatMap).set('key1', action.payload)
      },
      ...
}

评论

0赞 Aman Ghanghoriya 2/17/2023

我只能接受一个答案。

0赞 Shakya Peiris 2/17/2023 #2

首先，您可以将地图转换为对象，然后展开它。再次将最终对象转换为地图。

reducers: {
      setChatMap: (state, action) => {
         const obj = object.fromEntries(chatMap);
         const tCM = {...obj, key1: action.payload};
         state.chatMap = new Map(tCM);
      },
      ...
}

1赞 Ayudh 2/17/2023 #3

这就是你要找的：

reducers: {
      setChatMap: (state, action) => {
         state.chatMap = new Map([...chatMap, [key1, action.payload]]) 
      },
      ...
}

0赞 Versaroumane 2/17/2023 #4

你的问题依赖于这样一个事实，即 React 现在可以知道你的对象（Map）是否发生了变化，因为它比原语要复杂一些，你需要对该对象进行所谓的深度复制。

通过传递一个新对象，react 将看到一个新的引用，然后触发一个新的渲染。

干杯 😉

评论

0赞 Aman Ghanghoriya 2/17/2023

感谢您在回答中提到的有用参考链接。

上一个：如何使用动态函数名称ReactJS调用函数？

下一个：使用 Object-literals 和 switch-case 时无法访问异步函数中的对象键，我做错了什么？