Question

在我的应用程序中，我有一个HomePage组件，其中包含导航链接。该组件的路由为<Route to="/browse/:item" exact component={HomePage} />。因此，该组件具有一个导航栏，其中包含指向其“子路线”的NavLink链接。例如，将您引导至/browse/featured的NavLink或 /browse/new，我将生命周期方法componentDidUpdate()添加到了此组件中，console.log("UPDATED HOMEPAGE")仅添加到shouldComponentUpdate，每当我单击NavLink时，都会发生这种情况：

我尝试对nextProps和nextState参数使用AlbumView，以查看状态或道具是否确实发生了改变（会导致重新渲染的东西），但它们仍然保留相同。预先感谢您的帮助。

编辑：代码在github https://github.com/idanlo/spotify-test-frontend上我看到的有问题的组件是HomePage和console.log()

另一个编辑：这是发生的两个更新中的map()，每个显示更新前后的道具。在第一个更新中，您可以看到url不同，因此应该进行更新，但是在第二个更新中，没有什么不同，一切都一样（在状态下，一切也都一样）

Answer 1

通常由于状态更改而有多个呼叫。检查其他文件，以确保最初没有调用任何修改状态的操作。即使您检查nextProps的差异，更改后的变量也可能不在props中。

Answer 2

我怀疑Navlink的内部实现将setState与一个updater函数一起使用，后者是此重复日志的来源

我发现，当我使用updater函数更新状态时，componentDidUpdate会被触发两次！

但是，当我将对象传递给setState时，componentDidUpdate仅触发一次。

setState（updater [，回调]）

示例：

"ENV='test' node_modules/.bin/jest"

VS

setState（stateChange [，callback]）

示例：

incrementScore = () => {
this.setState(prevState => ({
    score: prevState.score + 1
  }));
};

我想是因为

将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

在React Docs上了解有关setState的信息

每个路由更改，componentDidUpdate调用两次

2 个答案: