需要帮助发送正确的有效负载以更新状态

Question

我正在使用 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"
       }
    ]```

Answer 1

您已将 有效载荷作为数组 与 contactId 和 contact 发送到减速器，您期望有效载荷具有 _id减速器中的字段。您可能只需要发送联系人并使用其中的 _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 },
        });
    };

reducer 如下

case 'updateContact':
    return {
      ...state,
        contacts: state.contacts.map((contact) =>
          contact._id === action.payload.contactId ? { ...contact, contact: action.payload.contact } : contact
        ),
        loading: false,
    };

需要帮助发送正确的有效负载以更新状态

Need help sending correct payload to update State

reactjs

mongodb-stitch

react-context