React Hook useEffect для извлечения и публикации в Backend (API)? - PullRequest
Новая
       30

React Hook useEffect для извлечения и публикации в Backend (API)?

0 голосов
/ 30 мая 2019

Это больше вопрос, чтобы узнать больше о том, как вы, ребята, обычно делаете это как проблему. В настоящее время у меня нет проблем с кодом, но я не уверен, что это правильный способ сделать это.

В моем коде у меня есть выборка (с Axios) для данных в Бэкэнде (простой список с объектами). И для этого я использую новые хиты React с useEffect, работающие как шарм: 

useEffect(() => {
    axios
      .get("http://localhost:5000/api/list")
      .then(result => {
        setExampleList(result.data);
      })
      .catch(error => console.log(error));
  }, [setExampleList]);

Но у меня также есть экран, на котором происходит процесс добавления в этот список в Backend. И для этого я обрабатываю форму отправки с аксиосами в Backend. И это «проблема». Это работает и идет к Backend, но мой выбор не обновлялся, потому что он не был повторно обработан или что-то. Затем я пришел к идее вызвать setData (), где выборка живет внутри функции для добавления нового элемента (после публикации): 

function handleSubmit(event) {
    event.preventDefault();
    let obj = {
      name: name,
      city: city
    };
    axios
      .post("http://localhost:5000/api/add", obj)
      .then(response => {
        console.log(response.data);
        obj.id = response.data.inserted_id;
        setExampleList([...setExampleList, obj]);
      })
      .catch(error => {
        console.log(error);
      });
    handleCloseModal();
  }

И это работает, но, как вы можете себе представить, немного «подделка», потому что данные на самом деле не такие, как в Backend, пока я не перезагружу страницу. Итак, ребята, вы что-то сделали таким образом? Что было бы лучшим решением в этом случае?

1 Ответ

1 голос
/ 30 мая 2019

Обычной практикой является «подделка» обновления списка, даже если у вас не было проблем с обновлением. Это потому, что вы хотите, чтобы ваше приложение казалось пользователю быстрым. Если на выполнение внутреннего запроса уходит 5 секунд, а затем обновляет экран, пользователь будет считать, что ваше приложение не работает.

В приложениях чата очень часто показывается сообщение как отправленное до его фактической отправки. Эта же концепция часто используется для удаления элементов. Элемент удаляется с экрана непосредственно перед обновлением серверной части, и обновление не требуется.

Возможно, вы захотите добавить сообщение пользовательского интерфейса, которое сообщит пользователю, если отправка не удалась, чтобы они не обновляли страницу и не задавались вопросом, почему в списке отсутствуют новые элементы.

Итак, чтобы ответить на ваши вопросы

Ребята, вы что-то сделали таким образом? Да!

Что было бы лучшим решением в этом случае? Если список предназначен для одного пользователя, то ваше решение отлично.

При этом, если вы ожидаете, что несколько пользователей будут обновлять список одновременно, вы захотите синхронизировать список до обновления страницы.

...