时间戳

首页 > 解决方案 > 反应路由器故障

reactjs - 反应路由器故障

问题描述

我遇到了麻烦react-router-dom。有一个模拟 API 资源，您可以在其中创建虚拟 API。我从该资源中获取数据。我的 JSON 结构如下所示：

{
  "imageUrl": "",
  "name": "",
  "count": 0,
  "size": {
    "width": 0,
    "height": 0
  },
  "weight": "",
  "comments": [],
  "description": "",
  "id": "1"
}

事实是这段代码对我有用，但在控制台中有一个警告：

React 无法识别 DOM 元素上的“computedMatch”道具

当我像这样在 Product_Detail.js 文件中输入大小字段时

<p>{differentProduct.size.height}</p>

我有一个错误：

无法读取未定义的属性（读取“高度”）

我的错误是什么？非常感谢你

应用程序.js

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Product_Details } from "./Components/Product_Details";
import { All_Products } from "./Components/All_Products";
import { Header } from "./Components/Header";

function App() {
  return (
    <Router>
      <Header />
      <div>
        <Route path="/" exact>
          <All_Products />
        </Route>

        <Route path="/products/:id">
          <Product_Details />
        </Route>
      </div>
    </Router>
  );
}

export default App;

页眉.js

import React from "react";
import { Link } from "react-router-dom";

export let Header = () => {
  return (
    <header className="header">
      <Link to="/">Products</Link>
    </header>
  );
};

All_products.js

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

export let All_Products = () => {
  let [products, setProducts] = useState([]);

  let fetchProducts = async () => {
    let response = await fetch(
      "https://613c5527270b96001798b0af.mockapi.io/api/v1/products"
    );
    let data = await response.json();
    setProducts(data);
  };

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

  return (
    <div className="all_products">
      {products.map((el) => (
        <div key={el.id} className="different_product">
          <img src={el.imageUrl} />
          <Link to={`/products/${el.id}`}>{el.name}</Link>
          <p>{el.description}</p>
        </div>
      ))}
    </div>
  );
};

Product_detail.js

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

export let Product_Details = () => {
  let [differentProduct, setDifferentProduct] = React.useState([]);

  let { id } = useParams();

  let fetch_Different_Product = async () => {
    let response = await fetch(
      `https://613c5527270b96001798b0af.mockapi.io/api/v1/products/${id}`
    );
    let json = await response.json();
    setDifferentProduct(json);
  };

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

  return (
    <div className="detail_page">
      {differentProduct && (
        <div>
          <h1>{differentProduct.name}</h1>
          <img src={differentProduct.imageUrl} />
          <p>{differentProduct.description}</p>
        </div>
      )}
    </div>
  );
};

标签： reactjsapireact-router

解决方案

因为 fetch API的初始值differentProduct是这样的。未定义。[]differentProduct.size

你应该像这样更新optional chaining

const [differentProduct, setDifferentProduct] = React.useState({});

<p>{differentProduct.size?.height}</p>

推荐阅读