将道具从一个组件传递到另一个组件，但返回未定义的

Question

这是我的库存。js文件，我在其中绘制并将其详细介绍为props

数据流，就像

neventory.js＆gt;＆gt;＆gt;＆gt;详细信息。 product.js

，但我不知道该如何解决此错误。在product.js中变得不确定，但其他工作发现。

我获取所有数据的自定义挂钩。

useproducts.js

const baseURL = "http://localhost:5000/inventory";

const useProducts = () => {

  const [products, setProducts] = useState([])

  useEffect(() => {
    axios.get(`${baseURL}`).then((res) => {
      setProducts(res.data);
      // console.log(setProducts)
    });
  }, []);

  return [products, setProducts]
};

inting.js

const Inventory = () => {
  const [products, setProducts] = useProducts([]);
  // console.log(products)
  return (
    <div>
      <div className="products-container">
        {products.map((product) => (
          <Detail key={product._id} product={product}/>
        ))}
      </div>
    </div>
  );
};

export default Inventory;

它正常工作，这是我的详细

。

const Detail = (props) => {
  const { _id, name, description, price, supplier_name, url, quantity } = props.product;

  const navigate = useNavigate();

  const goProduct = (id) => {
    navigate(`/inventory/${id}`);
    console.log("Product clicked")
    console.log(props.product);
  };

  return (
    <div>
      <div className="product-contrainer">
        <div className="product-card">
          <img src={url} className="product-image" id="image-product" alt="" />
          <h4 className="product-title">Product Name: {name}</h4>
          <p className="product-text price">Price: {price}$</p>
          <div className="buttons justify-content-evenly">
            <button
              className="custom-btn btn-16"
              onClick={() => goProduct(_id)}
              product={props.product}
            >
              Detail
            </button>
            <button className="buttons-section order custom-btn btn-14">
              Order
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Detail;

信息 对于另一个称为product（product.js）的组件，这是代码，但它返回未定义。 制作了动态路线

我为那个 product.js

const Product = (props) => {

  const {name, description, price, supplier_name, url, quantity} = props.props.product;
  
  return (
    <div>
      <div className="product-contrainer">
        <img src={url} className="product-image" alt="" />
        <h4 className="product-title">Product Name: {name}</h4>
        <p className="product-text description">Description: {description} </p>
        <p className="product-text suplier">Suplier: {supplier_name}</p>
        <p className="product-text quantity">Quantity: {quantity}</p>
        <p className="product-text price">Price: {price}$</p>
      </div>
    </div>
  );
};

export default Product;

Answer 1

您没有在详细信息中创建product作为JSX组件，但是您正在导航到创建product的组件。因此，您可以在导航期间使用路由参数，并以此方式传递所需的数据。

const goProduct = (id) => {
    navigate(`/inventory/${id}`, {state: props.product});
};

在您的产品组件中，您可以按以下方式访问它们。

const Product = () => {
  const location = useLocation();
  const {name, description, price, supplier_name, url, quantity} = location.state
}

Answer 2

基于您的代码，我看不到product组件将如何在详细信息组件中使用。但是这里的问题很可能是这样的行：

const {name, description, price, supplier_name, url, quantity} = props.props.product;

您应该以这种方式访问​​它：

const {name, description, price, supplier_name, url, quantity} = props.product;

因为props.product作为属性作为属性传递到product中，如此行：

            <button
              className="custom-btn btn-16"
              onClick={() => goProduct(_id)}
              product={props.product}
            >

因此组件现在是props.product