React Router: this.props.params在链接点击后没有更新

React Router: this.props.params not updated after Link click

本文关键字：更新 链接 Router this props params React      更新时间：2023-09-26

我正在构建一个带有侧边栏的简单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;

当我点击链接时，url栏中的url会改变，但类别不会。当我再次点击它时，类别也发生了变化。

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

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

编程路由
 this.props.router.push(url);

但是这个问题仍然存在。任何帮助都非常感谢!

  • 编辑

这是Categoryview

的代码

@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();
        }

第二次单击时看到旧数据的原因是因为componentWillReceiveProps在this.props使用该信息更新之前执行。更新方法以执行以下操作:

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

对于第一个没有显示，尝试在componentDidMount而不是componentWillMount中传递this.props(具有上述更改)。我意识到这会导致一个新的渲染运行，但我想知道如果道具还没有初始化。如果这不能解决它，我认为你需要调试你的过滤器函数的细节，看看setState是否被调用。

将你的props传递给showCategory function，这样它就可以在一个新的props到达组件时更新新值

componentWillReceiveProps(nextProps) {
 this.showCategory(nextProps);
}
componentWillMount(this.props){
 this.showCategory(this.props);
}
showCategory(props){
 const self = this;
 let queryParam = props.params.category;
 const availableCategories = 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();
    }
    if(categoryTitle === title && el.language === activeLocale){
      matched = true;
      self.setState({
        activeCategoryName: categoryTitle,
        activeCategory: el,
        notFound: false,
        isLoading: false,
        isEmpty: false
      });
    } else if(index === count && !matched){
      self.setState({
        isEmpty: true,
        isLoading: false
      });
    }
  });
}
}
相关文章：