Question

我正在尝试将商品数据从AllProducts组件传递到Product组件。

AllProducts.jsx：正在显示我拥有的所有产品，Product.jsx将显示特定的产品，以及如何将数据传递到Product.jsx？

这是我的AllProducts.jsx：

const AllProducts = (props) => {
  const [products, setProducts] = useState([]);

  const getProductsAPI = () => {
    axios
      .get("http://localhost:8000/api/products")
      .then((res) => {
        setProducts(res.data);
        getProductsAPI();
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getProductsAPI();
  }, [props]);

  return (
    <div>
      <table className="table table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {products.map((product, i) => (
            <tr key={i}>
              <th scope="row">{i}</th>
              <td>{product.title}</td>
              <td>
                <Link to={`/products/${product._id}`}> View </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

这是我的Product.jsx：

const Product = (props) => {
  return (
    <div className="container">
      <h4>{props.product.title}</h4>
    </div>
  );
};

export default Product;

如果您想查看我拥有的所有代码，这是我的项目github：https://github.com/nathannewyen/full-mern/tree/master/product-manager

Answer 1

如果已为AllProducts中的每个产品完全加载了数据，并且您不想在Product组件中通过产品ID进行另一个API调用，则在这种情况下，您不必使用路由链接以查看产品，只需进行条件渲染即可在AllProducts组件内显示Product组件。伪代码如下，

    const [showProduct, setShowProduct] = useState(false);
    const [currentProduct, setCurrentProduct] = useState();
    const showProduct = (product) => {
      setShowProduct(true);   
      setCurrentProduct(product);         
     }     
     <tbody>
        {products.map((product, i) => (
          <tr key={i}>
            <th scope="row">{i}</th>
            <td>{product.title}</td>
            <td>
              <button type="button" onclick = {showProduct(product)}>View</button>
            </td>
          </tr>
        ))}
      </tbody>

    return (showProduct ? <Product /> : <AllProucts/>)

如果您还需要进行另一个API调用以获取每种产品的额外数据，请使用路由器链接，但也许您不能传递道具。

我如何在ReactJS中将道具传递给另一个组件

1 个答案: