Как сохранить данные из API в состояние Reactjs?

Question

Как я могу сохранить свой объект, который выбирается из API, в состоянии таким образом, чтобы после обновления страницы sh он оставался доступным. Как сохранить полученные данные из API в состояние с именем параметра?

Поскольку я не хочу сохранять объект в локальном хранилище или хранилище сеанса.

Это может быть полезно таким образом, что перед выборкой в ​​тот же API он проверит, существует ли уже объект, то нет выборка требуется для этого API

Предположим, что мой API выглядит как https://example.com/new/${numberID}/staff

Когда API-интерфейс в первый раз выполняется для параметра {numberID} => 12ab1, он должен сохранить результат для этого {numberID } теперь в состоянии, когда {numberID} => параметр 13ab2 снова обновляется, он должен сохраняться в новом состоянии таким образом

Теперь параметр {numberID} => 12ab1 вызывается снова, вместо получения из API, он должен получать данные из штат. это спасет мой API, повторно набрав

Возможно ли это с помощью реакционных хуков?

Answer 1

Это невозможно.

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

Единственный способ сохранить данные через ссылку sh - это использовать стороннее программное обеспечение или такие вещи, как хранилище браузера.

Answer 2

Используйте localStorage API https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Вы можете поместить свои данные в localStorage и получить их оттуда, если вам это нужно. Например

          if (!localStorage.getItem('data')) {
              axios.get(`https://example.com/new/${numberID}/staff`)
                  dispatch({
                      type: "FETCHSUCCESS",
                      payload: response.data
                  });
                  localStorage.setItem('data', response.data);
              })
              .catch(error => {
                  dispatch({
                      type: "FETCHFAILURE"
                  });
              });
          }