显示所选图像的图像详细信息

Question

我每次都使用 API returns 随机图像。该应用程序当前显示来自 API 的 6 个随机图像，但是我现在正在尝试实现一个显示图像数据（例如日期、描述等）的页面。我每次制作时将如何处理在详细信息页面上请求，收到新数据。

显示图片和标题的页面：

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const FeaturedProducts = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = () => {
    axios
      .get(
        "https://api.nasa.gov/planetary/apod/?api_key=xxxxxxxxx&count=6&thumbs=True/"
      )
      .then((res) => {
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div>
      {products.map((product) => (
        <div key={product.title}>
          <p>{product.title}</p>
          <img src={product.url} />
          <Link to={`/product/${product.title}`}>View</Link>
        </div>
      ))}
    </div>
  );
};

export default FeaturedProducts;

似乎总是带回新数据（不保存旧状态）的详情页：

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const Product = ({ match }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchProduct();
  }, []);

  const fetchProduct = () => {
    axios
      .get(
        `https://api.nasa.gov/planetary/apod/?api_key=xxxxxxxxxx&count=6&thumbs=True/?title=${match.params.title}`
      )
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

  return (
    <div>
      {data.map((item) => {
        return (
          <div key={item.title}>
            <p>{item.title}</p>
          </div>
        );
      })}
      <div>
        <Link to="/">Back</Link>
      </div>
    </div>
  );
};

export default Product;

App.js 路由文件：

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./App.css";

import FeaturedProducts from "./FeaturedProducts";
import Product from "./Product";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={FeaturedProducts} />
          <Route exact path="/product/:title" component={Product} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Answer 1

在显示图片和标题的页面中，Link应该是这样的：

<Link to={{
    pathname: `/product/${product.title}`,
    state: { mainProducts: products }
  }}

并从详细信息页面

import {
  useLocation
} from "react-router-dom";

let location = useLocation();

let product = location.state.mainProducts;

//这将得到想要的图像

Answer 2

如评论中所述，将详细信息从 FeaturedProducts 传递到 Product 组件，而不是在 Product 组件中进行 API 调用

在FeaturedProducts组件中

<Link to={{pathname: '/product/${product.title}', productProps: {title: product.title, explanation: product.explanation}}}>View</Link>

在 Product 组件中，使用 useLocation 钩子读取属性

const location = useLocation();
const title = location.productProps.title;

显示所选图像的图像详细信息

Show image details of selected image

reactjs

react-router

axios

react-hooks

react-state