reactjs - 如何在反应路由器重定向期间管理反应状态

Question

例如，假设我有一个子组件（表的行），其状态为“rating”键，构造函数中的值设置为“0”。

在 getDerivedStateFromProps 和 ComponentDidMount 中，评级设置为 this.props.rating。到目前为止，一切都很好。

现在用户设置了一个新的评分，更新了状态，发送了对 mysql 的查询，一切都很好。但是随后用户单击链接（react-router-dom）到他们已经在的同一页面。React 会更新所有组件，但由于更高级别的组件没有更改，因此它不会再次查询数据库中的歌曲，因此同一组歌曲作为道具传递，以及旧的评分。

我的问题很简单：每次用户重定向到组件时，更高级别的组件是否应该查询数据库？如果是这样，是否有生命周期方法，因为道具没有改变？还是应该在每次用户选择评分时发送对新歌曲集的查询？后者似乎是正确的方法，但效率低下。

标签： reactjsreact-router

Answer 1

您需要“提升您的状态”，以便它存在于所有需要访问它的组件最近的共同祖先中。更新评分时，您需要更新更高级别组件中的状态，而不是子组件。子组件应该主要是展示性的——它接受一个评级来显示并提供一个回调来更新它。但是实际的更新和 mySql 交互应该发生在更高的祖先级别，并通过 props 传递下来。

记住：数据向下流动