再次单击组件时如何再次执行 componentDidMount? [英] How to re execute componentDidMount again when i click the component again?

问题描述

[![在此处输入图片描述][1]][1]

[![enter image description here][1]][1]

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

This is my top navbar of my project and [![enter image description here][2]][2]

当我点击博客按钮时，所有博客的列表都会呈现出来，在这个组件中，当我有搜索文本时，我现在有一个搜索选项，比如说vue"；然后我会得到所需的结果

when i click on blogs button list of all blogs will rendered and in this component i have a search option now when i have search text let's say "vue" then i will get the required result

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

这是博客组件的componentDidMount

and this is componentDidMount of Blog Component

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

当我再次点击 Top Navbar 中的博客(在屏幕截图中)获得结果后，url 已更改但未获取所有博客

After getting the result when i again clicked on Blogs from Top Navbar (in screenshot) url is getting changed but not getting all the blogs

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

带有搜索结果和 url 的屏幕截图将是 http://localhost:8075/blogs?q=vue当我再次单击博客按钮时，相同的屏幕截图也适用 url 正在更改但博客未更新 http://localhost:8075/blogs

screenshot with search result and url will be http://localhost:8075/blogs?q=vue same screenshot is also applicable when i clicked blogs button again url is getting changed but blogs is not updated http://localhost:8075/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 });
    }
  }

但不确定这是否正确并且通过使用它，我仍然在搜索输入字段中获得先前的值

but not sure this is correct or not and also by using this i am still getting the previous value in search input field

推荐答案

这可以借助componentDidUpdate来完成，你可以在中比较搜索paramscomponentDidUpdate，并且可以在它们不同时执行您的更改.

This can be done with the help of componentDidUpdate, you can compare search params in componentDidUpdate, and can perform your changes when they are differet.

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

这篇关于再次单击组件时如何再次执行 componentDidMount?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！