"React 将从 API 获取的数据传递给另一个组件"

Question

我从 API 中获取一些产品，并在卡片中显示它们。 卡片上有一个 More Details 链接，如果用户点击它，它将把用户带到所选的产品详细信息页面。 我到 productDetails 页面的路由有效，但是我很难找到将获取的数据作为道具传递到 productDetails 页面的方法。

这是我到目前为止所拥有的：我的 FeaturedProduct.js：

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

function FeaturedProduct(props) {
  const [products, setProducts] = useState([]);
 
  useEffect(() => {
    fetchProducts();
  }, []);

  function fetchProducts() {
    axios
      .get("https://shoppingapiacme.herokuapp.com/shopping") 
      .then((res) => {
        console.log(res); 
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return (
    <div>
      <h1> Your Products List is shown below:</h1>
      <div className="item-container">
       
        {products.map((product) => (
          <div className="card" key={product.id}>
            {" "}
           
            <h3>{product.item}</h3>
            <p>
              {product.city}, {product.state}
            </p>
            <Router>
              <Link to="/productdetails">More Details</Link>

              <Switch>
                <Route path="/productdetails" component={ProductDetails} />
              </Switch>
            </Router>
          </div>
        ))}
      </div>
    </div>
  );
}

export default FeaturedProduct;

Answer 1

我仍在学习，但这就是我要做的：

<Route path="/productdetails">
  <ProductDetails product={product}/>
</Route>

====

在 ProductDetails 上，您可以解构道具：

function ProductDetails(props) {
const {name, color} = props.product;

  return (
    <div>
      <div>
        <h1>{name}</h1>
        <h1>{color}</h1>
      </div>
    </div>
  );
}
export default  ProductDetails;

Answer 2

如果您使用的是 v 6，则将其作为带有 props 的元素传递； 对不起，我没有问哪个版本。 >

<Switch>
<Route path="/productdetails"  element={<ProductDetails {...props} />}/>
</Switch>

如果版本 v4/5 使用渲染方法 >

<Route path="/productdetails" render={(props) => (
{ <ProductDetails {...props} />} )}/>

Answer 3

 //pass it this way
 <Switch>
   <Route 
   path="/productdetails" 
   render={() => (
   { <ProductDetails  product={product}/>})}/>
   />
  </Switch>