问题

Question

无法使用 Redux ownProps 从 url 获取参数

2022-04-03

413

reactjs react-redux react-router

因此我收到一条错误消息 - Uncaught TypeError：无法读取未定义的属性（读取“params”）

AddOrUpdateProduct.js

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

App.js

<Routes>
          <Route path="/" exact element={<Dashboard />} />
          <Route path="/product" exact element={<Dashboard />} />
          <Route path="/saveproduct/:productId" element={<AddOrUpdateProduct />} />
          <Route path="/cart" exact element={<CartDetail />} />
        </Routes>

我正尝试使用“ownProps.match.params.productId”获取 url 中的 productid

Answer 1

问题

在 react-router-dom@6 中不再有路由 props。如果您需要访问 productId 路由参数，则需要创建一个高阶组件来访问路由 props，并将它们作为 props 注入到您的类组件中。

解决方案

创建一个自定义 withRouter 组件：

import { useParams } from 'react-router-dom';

const withRouter = Component => props => {
  const params = useParams();
  return <Component {...props} params={params} />;
}

包装并装饰 AddOrUpdateProduct 组件，使其将 params 作为 prop 注入。

function mapStateToProps(state, ownProps) {
  const productId = ownProps.params.productId;
  const product =
    productId && state.productListReducer.length > 0
      ? getProductById(state.productListReducer, productId)
      : {};

  return {
    product,
    products: state.productListReducer,
    categories: state.categoryListReducer
  };
}

export default connect(mapStateToProps)(withRouter(AddOrUpdateProduct));

Answer 2

在这里没有React专家，但我认为您需要在导出组件时使用，类似

307006270

Dimitar Cetelev

2022-04-03