Не удается прочитать URL-адреса свойства undefined после обновления

Question

Я создал приложение для фотографий, когда пользователь нажимает на модальное окно, затем появляется модальное окно с новым URL-адресом с идентификатором фотографии. Однако, когда я обновляю sh страницу, появляется ошибка. Я использую unspla sh api для получения фотографий. как удалить эту ошибку, когда пользователь обновляет страницу и показывает модальное окно, которое было до обновления sh?

песочница

Listitem. js

import React, { useState } from "react";
import { Link, BrowserRouter as Router, Route } from "react-router-dom";
import ModalWrapper from "./ModalWrapper";

const ListItem = ({ photo }) => {
  return (
    <>
      <Router>
        <div key={photo.id} className="grid__item card">
          <div className="card__body">
            <Link to={{ pathname: `/${photo.id}`, state: photo }}>
              <img src={photo.urls.small} alt="" />
            </Link>
            <Route path="/:photoId" component={ModalWrapper} />
          </div>
        </div>
      </Router>
    </>
  );
};
export default ListItem;

ModalWrapper. js

import React from "react";
import Modal from "react-modal";
import { useHistory, useLocation } from "react-router-dom";

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};

Modal.setAppElement("#root");

function ModalWrapper() {
  const history = useHistory();
  const location = useLocation();

  const photo = location.state;

  function downloadImage() {}

  function close() {
    history.push("/");
  }

  return (
    <Modal isOpen={true} onRequestClose={close} style={customStyles}>
      <img src={photo.urls.small} alt="" />

      <div>
        <button onClick={close} className="button">
          Close
        </button>
        <button onClick={downloadImage()}>Download</button>
      </div>
    </Modal>
  );
}

export default ModalWrapper;

Answer 1

Когда мы обновляем sh страницу, реагируем на состояние компонента приложения и сохраняем значения пустые / по умолчанию. Только значения в значениях localStorage или sessionStorage сохраняют свое состояние.

Answer 2

Кажется, что useLocation() модуля «response-router-dom» не имеет никакого состояния, когда вы впервые попадаете на страницу.

Возможно, вам нужно сначала установить его с данными из https://api.unsplash.com/photos${window.location.pathname}?client_id=your_clt_id и после этого вы можете открыть модальное окно с помощью photo.urls.small

Так что вам нужно заполнить состояние вашего приложения до открытия модального окна, я думаю.

В любом случае сообщение об ошибке

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
     in App (at src/index.js:9)
     in StrictMode (at src/index.js:8)

Но я не думаю, что это утечка памяти, а скорее всего, как я сказал выше, что вы открываете модальное окно до того, как приложение загрузится должным образом (ie состояния заполнены)

ОБНОВЛЕНИЕ

Возможно, возможным решением является создание синглтона вашего компонента приложения, а затем использование этого синглтона для извлечения фотографии из instance.state.photos вместо выбора the location.state.

В любом случае я не люблю синглтоны, и React мне тоже не нравится! ИМХО, это кажется излишним для такого приложения, как ваше.

Я также решил изучить codeandbox и обнаружил, что вы можете форкнуть его на github. Вот Это Да! Поэтому я сделал репо на своем github, чтобы лучше объяснить, о чем я говорю!

Я думаю, что этот коммит достаточно ясен

Я удалил репо, извините