1

我从 .receive 收到一个 url 参数useParams。我想将它传递给使用mapStateToProps.

集合.component.jsx

import { useParams } from "react-router-dom";
import { connect } from "react-redux";

import { selectShopCollection } from "../../redux/shop/shop.selectors";

import './collection.styles.scss'

const Collection = ({ collection }) => {
  const { collectionId } = useParams();
  console.log(collection)
  return (
    <div>
      <h1>{collection}</h1>
    </div>
  )
}

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(ownProps.match.params.collectionId)(state)
})

export default connect(mapStateToProps)(Collection);

shop.selectors.js

import { createSelector } from "reselect"

const selectShop = state => state.shop

export const selectShopCollections = createSelector([selectShop], shop =>
  shop.collections
)

export const selectShopCollection = collectionUrlParam =>
  createSelector([selectShopCollections], collections =>
    collections.find(collection => collection.id === collectionUrlParam)
  )

我想问题是，我不能使用 match 传递参数，因为 react-router-dom v6 没有在 props 中传递它。还有其他方法可以传递collectionId给选择器selectShopCollection吗？

4

2 回答 2

2

由于Collection是一个函数组件，我建议从中导入useSelector钩子，react-redux以便您可以collectionId直接传递匹配参数。它简化了组件 API。reselect选择器与useSelector钩子配合得很好。

import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";

import { selectShopCollection } from "../../redux/shop/shop.selectors";
import './collection.styles.scss'

const Collection = () => {
  const { collectionId } = useParams();
  const collection = useSelector(selectShopCollection(collectionId));

  console.log(collection);

  return (
    <div>
      <h1>{collection}</h1>
    </div>
  )
};

export default Collection;
于 2021-12-15T17:59:19.710 回答
0

集合组件可以通过withRouter. 但它已被 react-router v6 弃用。因此，我们需要创建自己的 HOC 来包装我们的组件。我创建了一个这样的 HOC：

import { useParams } from "react-router-dom"

const withRouter = WrappedComponent => props => {
  const params = useParams()

  return (
    <WrappedComponent {...props} params={params} />
  )
}

export default withRouter;

请参阅此答案以了解如何从课堂中的 react-router-dom v6 获取参数值，以了解制作此 HOC 的原因。

而且，我们可以将 导入withRouter到组件中并使用 with connectinside compose。阅读有关撰写的更多信息。它只是返回通过从右到左组合给定函数获得的最终函数。

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(ownProps.params.collectionId)(state)
})

export default compose(withRouter, connect(mapStateToProps))(Collection)
于 2021-12-15T17:42:19.093 回答