在 reactjs 中将道具从一个组件传递到另一个组件但 returns 未定义

Question

这是我的 Inventory.js 文件，我在其中进行映射并将其作为道具传递到 Detail 组件中

数据流向

Inventory.js >>> Detail.js >>> 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]
};

Inventory.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;

运行良好，这是我的 Detail.js 代码

Detail.js

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) 的组件，这是代码，但它 returns 未定义。我为此制作了动态路线

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 组件将如何在 Details 组件中使用。但这里的问题很可能是这一行：

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

Answer 2

您没有在 Detail 中将 Product 创建为 JSX 组件，而是导航到创建 Product 的组件。因此，您可以在导航期间使用 route params 并通过这种方式传递所需的数据。

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

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

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

在 reactjs 中将道具从一个组件传递到另一个组件但 returns 未定义

Passing props from one component to another in reactjs but returns undefined

reactjs

react-props

react-component