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

Question

[！[在此处输入图像描述][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 });
};

这是博客组件的组件DidMount

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>

将显示带有搜索结果和url的屏幕截图http://localhost:8075/blogs?q=vue当我再次点击博客按钮时，同样的屏幕截图也适用。url正在更改，但博客没有更新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 });
}
}

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

Answer 1

这可以在componentDidUpdate的帮助下完成，您可以比较componentDidUpdate中的搜索params，并可以在不同时执行更改。

解决方案：

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