如何使用反应钩子中的可选处理将道具从一个组件传递到另一个组件

Question

const ViewCategory = () => {
  const history = useHistory();
  useEffect(() => {
    axios
      .get("http://localhost:8080/products", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      })
      .then((response) => {
        console.log("List of products", response.data);
        setData(response.data);
        setisLoaded(true);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const [data, setData] = useState();
  const [isloaded, setisLoaded] = useState(false);

  const viewProductVariation = (productId) => {
    history.push("/ProductVariation", {
      productId,
    });
  };

  let products = null;
  if (isloaded) {
    products = data.map((product) => (
      <div className="card">
        <div class="col-sm">
          <div className="card-body">
            <h4 className="card-title"> {product.name} </h4>
            <p className="card-text"> {product.brand} </p>
            <button
              className="btn btn-primary"
              onClick={() => viewProductVariation(product.id)}
            >
              View
            </button>
          </div>
        </div>
      </div>
    ));
  }

  return (
    <div className="container">
      <div className="row"> {products} </div>
    </div>
  );
};

useEffect(() => {
  const Id = props.history.location.state?.productId;
  axios
    .get("http://localhost:8080/productVariationDisplay/" + Id, {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    })
    .then((response) => {
      console.log("List of products variation", response.data);
      setData(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

我是反应钩子的新手我正在尝试使用反应钩子将 viewProductVariation 的 productId 传递给另一个组件，但我遇到了一个问题，我得到未定义的道具谁能告诉我如何使用可选传递该 productId使用反应钩子处理从一个组件到另一个组件

Answer 1

您可以在目标组件中使用路由器挂钩useParams() 来获取参数值

const { productId } = useParams();