React/TypeScript "错误:超出最大更新深度"时尝试在超时时重定向

Question

>我有一个项目，我正在尝试动态地从第 1 页重定向到 2 页等。这以前对我有用，但最近我收到此错误：

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

在今天早上看到这条消息后，以及多个SO页面说不要在render打电话给setState，我已将我的setTimeout电话移至componentDidMount。

到目前为止我已经尝试过 - 调用一个更改属性this.props.pageWillChange函数，然后在渲染中我根据该条件返回一个对象 - 在渲染中返回在内联 if 语句中设置的对象挂起条件 - 将pageWillChange转换为本地道具，而不是由类继承的道具(我非常喜欢这个选项，因为对于该组件的每个新版本，其状态都是相同的(

还有很多事情，但这些感觉会起作用。有人能帮忙吗？

import React, { Component } from "react"
import axios from "axios"
import { GridList, GridListTile } from "@material-ui/core"
import "../assets/scss/tile.scss"
import Request from "../config.json"
import DataTile from "./DiagnosticDataTile"
import { IDiagnosticResultData } from "../interfaces/IDiagnosticResultData"
import { Redirect } from "react-router"
interface IProps {
category: string
redirect: string
}
interface IPageState {
result: IDiagnosticResultData[]
pageWillChange: boolean
}
class Dashboard extends Component<IProps, IPageState> {
_isMounted = false
changeTimeInMinutes = 0.25
willRedirect: NodeJS.Timeout
constructor(props: Readonly<IProps>, state: IPageState) {
super(props)
this.state = state
console.log(window.location)
}
componentDidMount(): void {
this._isMounted = true
this.ChangePageAfter(this.changeTimeInMinutes)
axios
.get(Request.url)
.then(response => {
if (this._isMounted) {
this.setState({ result: response.data })
}
})
.catch(error => {
console.log(error)
})
}
componentWillUnmount(): void {
this._isMounted = false
clearTimeout(this.willRedirect)
}
ChangePageAfter(minutes: number): void {
setTimeout(() => {
this.setState({ pageWillChange: true })
}, minutes * 60000)
}
render() {
var data = this.state.result
//this waits for the state to be loaded
if (!data) {
return null
}
data = data.filter(x => x.categories.includes(this.props.category))
return (
<GridList
cols={this.NoOfColumns(data)}
cellHeight={this.GetCellHeight(data)}
className="tileList"
>
{this.state.pageWillChange ? <Redirect to={this.props.redirect} /> : null}
{data.map((tileObj, i) => (
<GridListTile
key={i}
className="tile"
>
<DataTile data={tileObj} />
</GridListTile>
))}
</GridList>
)
}
}
export default Dashboard

(对 React 和 TypeScript 非常新，我的第一篇 SO 帖子呜呜呜！(

Answer 1

尝试下面的代码，还有几点：

• 无需_isMounted字段。"componentDidMount"中的代码总是在挂载后运行。
• 无需在构造函数中设置状态。实际上不再需要构造函数了。
• 我看不出componentWillUnmount坐骑有什么clearTimeout意义。它永远不会被分配为超时。

关于路由。您可以使用"withRouter"高阶函数在changePageAfter方法中以编程方式更改路由。

希望这有帮助！

import axios from "axios"
import { GridList, GridListTile } from "@material-ui/core"
import "../assets/scss/tile.scss"
import Request from "../config.json"
import DataTile from "./DiagnosticDataTile"
import { IDiagnosticResultData } from "../interfaces/IDiagnosticResultData"
import { Redirect, RouteComponentProp } from "react-router"
interface PropsPassed {
category: string
redirect: string
}
type Props = PropsPassed & RouteComponentProp
interface IPageState {
result: IDiagnosticResultData[]
pageWillChange: boolean
}
class Dashboard extends Component<Props, IPageState> {
changeTimeInMinutes = 0.25
willRedirect: NodeJS.Timeout
componentDidMount(): void {
this.ChangePageAfter(this.changeTimeInMinutes)
axios
.get(Request.url)
.then(response => {   
this.setState({ result: response.data })
})
.catch(error => {
console.log(error)
})
}
changePageAfter(minutes: number): void {
setTimeout(() => {
this.props.history.push({
pathname: '/somepage',
});
}, minutes * 60000)
}
render() {
var data = this.state.result
//this waits for the state to be loaded
if (!data) {
return null
}
data = data.filter(x => x.categories.includes(this.props.category))
return (
<GridList
cols={this.NoOfColumns(data)}
cellHeight={this.GetCellHeight(data)}
className="tileList"
>
{data.map((tileObj, i) => (
<GridListTile
key={i}
className="tile"
>
<DataTile data={tileObj} />
</GridListTile>
))}
</GridList>
)
}
}
export default withRouter(Dashboard)