Нужна помощь в отправке правильных данных для обновления состояния - PullRequest
Новая
       18

Нужна помощь в отправке правильных данных для обновления состояния

1 голос
/ 05 мая 2020

Я использую приложение MongoDB-Stitch для создания приложения телефонной книги. Когда я обновляю пользователя, информация правильно сохраняется в базе данных, но не будет отображаться на клиенте, пока я не обновлю sh страницу. Я считаю, что проблема в моем редукторе с 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"
       }
    ]```

1 Ответ

1 голос
/ 05 мая 2020

Вы отправили полезную нагрузку в виде массива с 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 отдельно и обновить редуктор, как показано ниже 

   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,
    };
...