javascript - React Router : this. props.params 在链接单击后未更新

Question

我正在构建一个带有侧边栏的简单 react 应用程序。我想从中交换应用程序的各个类别。

我的路由器如下所示:

<Route path={path} component={App}>
   <IndexRoute component={HomeView} />
   <Route path="/" component={HomeView} />
   <Route path="/manage" component={LoggedInView} />
   <Route path="/search/:topic" component={SearchView} />
   <Route path="/c/:category" component={CategoryView} />
   <Route path="*" component={ErrorView} type="404"/>
</Route>

在侧边栏中我有一个这样的链接:

  <Link to={{ pathname: '/c/'+el.urlkey}} activeClassName="active"{el.title}</Link>

最后在 CategoryView 中我有这个变量:

   let queryParam = this.props.params.category;

当我单击链接时，网址栏中的网址会更改，但类别不会更改。当我再次单击它时，类别也会发生变化。

如果我记录“queryParam”，我会看到第一次单击时，它返回相同的值。只有在第二次单击后它才会改变。

为什么第一次点击时它没有改变？我还尝试过使用

以编程方式进行路由

 this.props.router.push(url);

但是问题仍然出现。非常感谢任何帮助!

• 编辑

这是类别 View 的代码

@pureRender
class Category extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeCategoryName: '',
      activeCategory: {},
      availableTopics: {},
      ...
    };
  }


  componentWillReceiveProps() {
    this.showCategory();
  }

  componentWillMount(){
    this.showCategory();
  }

  showCategory(){
    const self = this;
    let queryParam = this.props.params.category;
    const availableCategories = this.props.categories;
    let matched = false;

    const count = availableCategories.length - 1;
    if(count === -1){
      this.setState({
        notFound: true
      });
    } else {
      filter(availableCategories, function (el, index) {
        const categoryTitle = el.urlkey.toLowerCase();
        const activeLocale = self.props.activeLocale;
        let title = null;
        if (queryParam !== undefined) {
          title = queryParam.toLowerCase();
        }

Answer 1

当您第二次单击时看到旧数据的原因是，在用该信息更新 this.props 之前，componentWillReceiveProps 就执行了。更新方法来执行此操作:

componentWillReceiveProps(nextProps) {
  this.showCategory(nextProps);
}

showCategory(props) {
  let queryParam = props.params.category;
  // etc
}

对于第一个未显示的情况，请尝试在 componentDidMount 而不是 componentWillMount 中传递 this.props (进行上述更改)。我意识到这会导致新的渲染运行，但我想知道 Prop 是否尚未初始化。如果这不能解决问题，我认为您需要调试过滤器函数中的详细信息，并查看是否调用了 setState。