如何在MapStateToProps中使用URL中的查询参数

Question

我在使用mapStateToProps(state, ownProps)将查询参数从URL插入组件的道具时遇到了一个问题。

我正试图使用我的URL作为searchState，正如Dan Abramov在这个问题中回答的那样：如何同步Redux状态和URL查询参数

问题是，我无法从ownProps访问查询参数。

例如，我的URL是：http://localhost:3000/courses?language=en&page=3，我想把页码作为道具来访问。

我认为ownProps不适用于查询参数(即[...]?language=en&page=3(。我试过这种东西，但似乎不起作用：

[...]
console.log(props.pageNumber)
[...]
const mapStateToProps = (state, ownProps) => {
return {
pageNumber: ownProps.match.params.page
}
}

你知道我如何从我的URL中访问我的页码作为ownProp吗？

提前谢谢。

Answer 1

查询参数不是match.params中params的一部分。您必须自己从location访问它们，并使用浏览器的URLSearchParams或类似qs的助手解析它们。文档中有一个演示可能会有所帮助。

这是演示的钩子：

// A custom hook that builds on useLocation to parse
// the query string for you.
function useQuery() {
return new URLSearchParams(useLocation().search);
}

在组件内部，您可以使用这个钩子访问查询参数，并将它们用作选择器函数的参数。

const query = useQuery();
// query parameters might be `null`
const language = query.get("language") ?? "en";
// they are always `string` instead of `number`
const page = parseInt(query.get("page") ?? "1");
// can use these values to select from the store
const courses = useSelector(selectCourses(language, page))

如果你愿意的话，你可以在mapStateToProps中解析location。但Dan的答案是2016年的，现在React钩子更有意义，至少在我的选择中是这样。

Answer 2

我建议使用this.props.location.search而不是在mapStateToProps中访问componentDidMount内部的查询参数或任何在安装任何组件时运行的方法。