[![enter image description here][1]][1]
This is my top navbar of my project and [![enter image description here][2]][2]
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 });
};
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 });
}
};
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>
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
i solved the issue with this
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
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 });
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.