reactjs - 需要帮助发送正确的有效负载以更新状态
问题描述
我正在使用 MongoDB-Stitch 应用程序来创建电话簿应用程序。当我更新用户时,信息会正确保存在数据库中,但在我刷新页面之前它不会显示在客户端上。我相信问题出在我的减速器中,action.payload._id但我不确定是否是这样。减速器
case 'updateContact':
return {
...state,
contacts: state.contacts.map((contact) =>
contact._id === action.payload._id? action.payload : contact
),
loading: false,
};```
Action
```const updateContact = async (contactId, contact) => {
const query = { _id: contactId };
const update = {
$set: {
contact,
},
};
const options = { upsert: false };
await items.updateOne(query, update, options);
dispatch({
type: 'updateContact',
payload: [contact, contactId],
});
};
我的数据是这样存储的:
contacts: [
{
"_id":"5eb0c9238016c9de09f3d307",
"contact":{
"name":"Anne Bonny",
"email":"anne@bonny.com",
"phone":"3213231423"
},
"owner_id":"5ea89a7e94861451f4c4fe6f"
},
{
"_id":"5eb0c93f8016c9de09f3d308",
"contact":{
"name":"Woodes Rogers",
"email":"woodes@rogers.com",
"phone":"3217037475"
},
"owner_id":"5ea89a7e94861451f4c4fe6f"
},
{
"contact":{
"name":"john silver",
"email":"longjohn@silver.com",
"phone":"9391032314"
},
"owner_id":"5ea89a7e94861451f4c4fe6f",
"_id":"5eb19220a6949dfb5c76e30b"
},
{
"contact":{
"name":"Charles Vane",
"email":"charles@vane.com",
"phone":"3921303921"
},
"owner_id":"5ea89a7e94861451f4c4fe6f",
"_id":"5eb19234a6949dfb5c76e30c"
}
]```
解决方案
您已将有效负载作为数组与reducercontactId
一起发送contact
到 reducer,您希望有效负载_id
在 reducer 中有字段。您可能只需要发送联系人并使用其中的_id
字段,假设发送到更新联系人的联系人是格式
{
"_id":"5eb0c93f8016c9de09f3d308",
"contact":{
"name":"Woodes Rogers",
"email":"woodes@rogers.com",
"phone":"3217037475"
},
"owner_id":"5ea89a7e94861451f4c4fe6f"
},
将您的操作更改为以下代码以使其正常工作
const updateContact = async (contactId, contact) => {
const query = { _id: contactId };
const update = {
$set: {
contact,
},
};
const options = { upsert: false };
await items.updateOne(query, update, options);
dispatch({
type: 'updateContact',
payload: contact,
});
};
如果您的联系人对象只是以下格式
{
"name":"Woodes Rogers",
"email":"woodes@rogers.com",
"phone":"3217037475"
},
您需要单独传递contactId并更新您的reducer,如下所示
const updateContact = async (contactId, contact) => {
const query = { _id: contactId };
const update = {
$set: {
contact,
},
};
const options = { upsert: false };
await items.updateOne(query, update, options);
dispatch({
type: 'updateContact',
payload: { contact, contactId },
});
};
和减速器将如下
case 'updateContact':
return {
...state,
contacts: state.contacts.map((contact) =>
contact._id === action.payload.contactId ? { ...contact, contact: action.payload.contact } : contact
),
loading: false,
};
推荐阅读
- ios - 为什么 Microsoft Graph MSAL SDK 不支持 Microsoft 电子邮件(例如 ****@hotmail.com、****@live.com、****@outlook.com)帐户在 Onedrive 中上传?
- elasticui - 如何在 EuiFilePicker 中按文件类型过滤
- server - 如果几个小时后屏幕远程关闭,VPS 的 GPU 将无法工作
- ios - 如何在使用 blob url 生成的 ios react-native-webview 中共享 pdf 文件
- finite-automata - Epsilon 在计算理论中的应用
- elmo - 为什么小型预训练 elmo 模型的 gpu 内存比 Original emlo 模型使用的多?
- javascript - 如何在 ODOO V14 中从 js 覆盖 _onSave 函数
- sql - SQL Join 与具有 NOT 条件的映射表
- python - FileNotFoundError:[Errno 2] 没有这样的文件或目录:'-f'
- python-multiprocessing - 使用 lock.acquire 和 release 在多处理循环中获取更新的值