Reactjs 当我再次单击组件时，如何重新执行componentDidMount？

[！[在此处输入图像描述][1][1]

这是我的项目的顶部导航栏 [！[在此处输入图像描述][2][2]

当我点击博客按钮时，所有博客的列表都将呈现，在这个组件中，我现在有一个搜索选项，当我有搜索文本时，比如说“vue”，那么我将得到所需的结果

handleSubmit = values => {
    const { size } = this.state;
    this.setState({ searchString: values.searchString, isSearch: true });
    SearchSchema.searchString = this.state.searchString;
    this.props.history.push(`/blogs?q=${values.searchString}`);
    this.props.actions.loadBlogs({ page: 0, size, searchString: values.searchString });
  };

这是Blog组件的componentDidMount

componentDidMount = () => {
    const { size } = this.state;
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q) {
      this.setState({ searchString: q, isSearch: true });
      this.props.actions.loadBlogs({ page: 0, searchString: q, size });
    } else {
      this.setState({ searchString: '', isSearch: false });
      this.props.actions.loadBlogs({ page: 0, size });
    }
  };

当我再次从顶部导航栏（截图中）点击博客时，得到的结果是url发生了变化，但并没有得到所有的博客

<Link className="nav-link" to="/blogs">
            Blogs
          </Link>

但我不确定这是否正确

---

而且，通过使用此选项，我仍然可以在搜索输入字段中获得以前的值，这可以通过

componentdiddupdate

的帮助来完成，您可以比较

componentdiddupdate

中的搜索

params

，并且可以在它们不同时执行更改

解决方案：

---

你能告诉我们你是如何定义你的

块的吗？同意，我们能看看你的路由吗，还有更多关于它可能需要如何响应更新的URL的博客组件吗？这是我在route.js{path:'/blogs'，name:'blogs'，component:blogs}，componentDidUpdate（prevProp，prevState）{const{size}中写的=this.state；const params=new URLSearchParams（this.props.location.search）；const q=params.get（'q'）；if（q！==prevState.searchString）{console.log（'----in-if-------'）；this.setState（{searchString:q}）；this.props.actions.loadBlogs（{page:0，size}）；}我用这个解决了这个问题，但是我的搜索输入字段仍然有相同的值，我不确定这是否正确。setState（{searchString:''，isSearch:false}）；Infinite循环错误您是否在代码中应用了

if（prevProps.location.search！==this.props.location.search）{

此条件？

componentDidUpdate(prevProp, prevState) {
    const { size } = this.state;
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q !== prevState.searchString) {
      console.log('-------- in if -----------');
      this.setState({ searchString: q });
      this.props.actions.loadBlogs({ page: 0, size });
    }
  }

componentDidUpdate(prevProps) {
  if(prevProps.location.search !== this.props.location.search) {
     this.init(); 
  }    
}

componentDidMount {
    this.init();
};

 init = () => {
   const { size } = this.state;
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q) {
      this.setState({ searchString: q, isSearch: true });
      this.props.actions.loadBlogs({ page: 0, searchString: q, size });
    } else {
      this.setState({ searchString: '', isSearch: false });
      this.props.actions.loadBlogs({ page: 0, size });
    }    
 }