我需要访问productId，一个URL中的变量，经过一点搜索，我发现useParams钩子被用来做这个。当我这样做时，我可以访问这个变量，但我需要在另一个函数mapStateToProps中使用这个变量。当我试图从其他函数访问这个变量时，它是未定义的。
AddOrUpdateProduct.js:

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { saveProduct } from "../../redux/actions/productActions";
import { getProducts } from "../../redux/actions/productActions";
import { getCategories } from "../../redux/actions/categoryActions";
import ProductDetail from "./ProductDetail";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";

function AddOrUpdateProduct({
  products,
  categories,
  getProducts,
  getCategories,
  saveProduct,
  history,
  ...props
}) {
  let {productId} = useParams();

  const [product, setProduct] = useState({ ...props.product });

  useEffect(() => {
    if (categories.length === 0) {
      getCategories();
    }
    setProduct({ ...props.product });
  }, [props.product]);

  function handleChange(event) {
    const { name, value } = event.target;
    setProduct((previousProduct) => ({
      ...previousProduct,
      [name]: name === "categoryId" ? parseInt(value, 10) : value,
    }));
  }

  function handleSave(event) {
    event.preventDefault();
    saveProduct(product).then(() => {
      history.push("/");
    });
  }
  
  return (
    <ProductDetail
      product={product}
      categories={categories}
      onChange={handleChange}
      onSave={handleSave}
    ></ProductDetail>
  );
  
}

export function getProductById(products, productId) {
  let product = products.find((product) => product.id == productId) || null;
  return product;
}

function mapStateToProps(state) {
  const productId = this.productId;
  const product =
    productId && state.productListReducer.length > 0
      ? getProductById(state.productListReducer, productId)
      : {};
  return {
    product,
    products: state.productListReducer,
    categories: state.categoryListReducer,
  };
}

const mapDispatchToProps = {
  getCategories,
  getProducts,
  saveProduct,
};

export default connect(mapStateToProps, mapDispatchToProps)(AddOrUpdateProduct);

App.js:

import { Container } from "reactstrap";
import Navi from "../navi/Navi";
import Dashbord from "./Dashbord";
import { Routes, Route } from "react-router-dom";
import CartDetail from "../cart/CartDetail";
import AddOrUpdateProduct from "../products/AddOrUpdateProduct";
import NotFound from "../common/NotFound";

function App() {
  return (
    <Container>
      <Navi></Navi>
      <Routes>
        <Route path="/" element={<Dashbord></Dashbord>}></Route>
        <Route path="/product" element={<Dashbord></Dashbord>}></Route>
        <Route path="/cart" element={<CartDetail></CartDetail>}></Route>
        <Route
          path="/saveproduct/:productId"
          element={<AddOrUpdateProduct/>}
        ></Route>
         <Route
          path="/saveproduct"
          element={<AddOrUpdateProduct/>}
        ></Route>
        <Route  path ="*" element={<NotFound></NotFound>}></Route>
      </Routes>
    </Container>
  );
}

export default App;