React Router - 从查询字符串构建状态
React Router - Build State from Query String
React 新手,构建一个搜索应用程序,其中 URL 是根据输入的搜索词和选择的后续过滤器构建的。我正在根据搜索词和所做的选择更新查询字符串,而不是路径。 (例如 /?term=movies&selections=action,adventure)我通过 Action Creators 中的 browserHistory.push() 手动将这些更改推送到查询字符串。我不确定要遵循正确的模式来响应这些更新来补充应用程序状态。
我可以在第一次渲染时检查 componentWillMount() 中的查询字符串参数以渲染初始状态,这工作正常,但是当使用浏览器 back/forward 按钮时,我不确定最佳模式跟随重建状态。
我在 React 之上使用以下模块:
反应还原
反应路由器
反应路由器 redux
感谢建议。
您需要在 componentWillReceiveProps
回调中检查查询。像这样:
componentWillReceiveProps(nextProps) {
if (!_.isEqual(this.props.location.query, nextProps.location.query) {
this.fetchDataFromServer(nextProps.location.query);
}
}
React 新手,构建一个搜索应用程序,其中 URL 是根据输入的搜索词和选择的后续过滤器构建的。我正在根据搜索词和所做的选择更新查询字符串,而不是路径。 (例如 /?term=movies&selections=action,adventure)我通过 Action Creators 中的 browserHistory.push() 手动将这些更改推送到查询字符串。我不确定要遵循正确的模式来响应这些更新来补充应用程序状态。
我可以在第一次渲染时检查 componentWillMount() 中的查询字符串参数以渲染初始状态,这工作正常,但是当使用浏览器 back/forward 按钮时,我不确定最佳模式跟随重建状态。
我在 React 之上使用以下模块: 反应还原 反应路由器 反应路由器 redux
感谢建议。
您需要在 componentWillReceiveProps
回调中检查查询。像这样:
componentWillReceiveProps(nextProps) {
if (!_.isEqual(this.props.location.query, nextProps.location.query) {
this.fetchDataFromServer(nextProps.location.query);
}
}