刷新后无法读取未定义的属性“url”

Question

当用户单击模态框时，我创建了一个照片应用程序，然后模态框会弹出一个带有照片 ID 的新 URL。但是，当我刷新页面时，它会显示错误。我正在使用 unsplash api 来检索照片。当用户刷新页面并显示刷新前的模式时如何消除此错误？

sandbox

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

第一次登陆页面时，“react-router-dom”模块的useLocation()似乎没有任何状态。

也许您必须首先使用来自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)

但我不认为这是内存泄漏，但正如我上面所说，您在应用程序正确加载之前打开模式（即状态已填充）

更新

也许一个可能的解决方案是创建一个 App 组件的单例，然后使用该单例实例来检索 instance.state.photos 中的照片，而不是选择 location.state。

反正我不喜欢单例，也不喜欢 React！恕我直言，对于像您这样的应用来说，这似乎有点矫枉过正。

我也决定探索codesandbox，发现可以在github上fork。哇！ 所以我在我的 github 上做了一个 repo，以便更好地解释我在说什么！

我觉得这个commit已经够清楚了