Reactjs 在其他页面的URL中显示数据感谢id

我正在培训React，我想点击产品标题以显示该产品的详细信息页面。所以我使用react路由器dom来模拟多个页面。我有一个表中显示的假API中的数据，我想在另一个页面上检索它，因此我检索数据的ID，并在“productsDetails”页面中检索该ID，但我无法检索其他数据，如标题、描述

提前感谢您的解释

应用程序

import React，{Component}来自'React'；
导入“/css/App.css”；
导入“./css/Products.css”
从“./Components/Navigation”导入导航；
从“./组件/产品”进口产品；
从“react Router dom”导入{BrowserRouter作为路由器、路由、交换机，}；
从“/Components/ProductsDetails1”导入产品详细信息；
导出默认类应用程序扩展组件{
render（）{
返回(
)
}
}

产品

import React, { Component } from 'react';
import '../css/Products.css';
import axios from 'axios';
import './ProductsDetails1'
import {Link} from 'react-router-dom'

export default class Products extends Component {
    state = {
        productsData: []
      }
      componentDidMount = () => {
        axios.get('https://fakestoreapi.com/products?limit=7')
        .then(res => {
          console.log(res.data)
          this.setState ({
            productsData: res.data
          })
        })
      }
    render() {
        const listsProducts = this.state.productsData.map(listProduct => {
            return <tbody className="products__body">
                    <tr>
                        <td> <Link to={"/products-details/"+listProduct.id}>{listProduct.title}</Link></td>
                        <td>{listProduct.category}</td>
                        <td>{listProduct.price}</td>
                        <td>{Math.round((listProduct.price + listProduct.price * 0.2)*100) /100}</td>
                    </tr> 
              </tbody>
          })
        return (
            <main className="products">
                <h1 className="products__title">Products management</h1>
                <table cellSpacing="0">
                <thead className="products__head">
                    <tr>
                    <th className="table--title">Product name</th>
                    <th className="table--title">Category</th>
                    <th className="table--title">Price</th>
                    <th className="table--title">Price (including VAT)</th>
                    </tr>
                </thead>
                  {listsProducts}
                </table>
            </main>
        )
    }
}

import React，{Component}来自'React'；
导入“../css/Products.css”；
从“axios”导入axios；
导入“./ProductsDetails1”
从“react router dom”导入{Link}
导出默认类产品扩展组件{
状态={
产品数据：[]
}
componentDidMount=（）=>{
axios.get（）https://fakestoreapi.com/products?limit=7')
。然后（res=>{
console.log（res.data）
这是我的国家({
productsData:res.data
})
})
}
render（）{
const listsProducts=this.state.productsData.map（listProduct=>{
返回
{listProduct.title}
{listProduct.category}
{listProduct.price}
{Math.round（（listProduct.price+listProduct.price*0.2）*100）/100}
})
返回(
产品管理
产品名称
类别
价格
价格（含增值税）
{listsProducts}
)
}
}

产品详情

import React, { Component } from 'react'
import '../css/ProductsDetails.css'

export default class ProductsDetails extends Component {
    state = {
        id: this.props.match.params.id,

    }

    render() {
        return (
            <div className="products__details">
                {this.state.id}
            </div>
        )
    } 
}

import React，{Component}来自“React”
导入“../css/ProductsDetails.css”
导出默认类产品详细信息扩展组件{
状态={
id:this.props.match.params.id，
}
render（）{
返回(
{this.state.id}
)
} 
}

目前最简单的方法是将处于路由状态的

列表产品

发送到

产品详情

页面

在计算产品链接时，还要传递产品：

<Link
  to={{
    pathname: "/products-details/" + listProduct.id,
    state: {
      listProduct
    }
  }}
>

---

如果/当您的应用程序/状态的大小和复杂性增加时，您将希望通过或使用，或最终通过Redux实现更好的状态管理。

非常感谢您的回答，我按照您所说的更新了我的代码，但当我单击其中一个产品链接时，它会显示一个错误：“错误：对象作为子对象无效。”（找到：具有键{id}的对象）。如果要呈现子对象集合，请改用数组。“@RitalCharmant渲染对象的内容和位置？您是否试图直接在

ProductsDetails

组件中渲染整个

listProduct

？没关系，我理解我的错误，非常感谢您的帮助！@RitalCharmant太棒了！干杯，祝您好运。

<Link
  to={{
    pathname: "/products-details/" + listProduct.id,
    state: {
      listProduct
    }
  }}
>

class ProductsDetails extends Component {
  render() {
    const {
      location: {
        state: { listProduct }
      },
      match: {
        params: { id }
      }
    } = this.props;
    return (
      <div className="products__details">
        {id}
        <div>{listProduct.description}</div>
      </div>
    );
  }
}