React报错Too many re-renders无限重渲染问题排查求助

问题描述 #

开发学校项目时使用React搭配TypeScript，运行时触发报错：Too many re-renders. React limits the number of renders to prevent an infinite loop，不清楚问题根因。尝试使用布尔类型state和简单的Work[]类型状态修复，始终抛出相同的重渲染报错。

关联代码 #

WorkList组件代码 #

export default function WorkList(props :any) {
   const id = props.id
   const [works, setWorks] = useState<Work[]>()

    useEffect(()=> {
        if(!works){
            Api.fetchFromAPI(
                HTTP_METHOD.GET,
                `/artist/${id}/worksofart?token=${AuthService.getToken()}`,
                new Headers()
            ).then((listOfWorks) => {
                setWorks(listOfWorks)
            })
        }
    }, [works])

    function renderWorks(work: Work) {
        return <WorkPost work={work}/>
    }

    return !works ? (
        <div>
            <h3>Loading works...</h3>
        </div>
    ) : (
        <div className={"work-panel"}>
            <h3>Works Of Art:</h3>
            <div>
                {works.map(renderWorks)}
            </div>
        </div>
    )
}

Work对象定义 #

export class Work {
    public id: string;
    public work_name: string;
    public owner: string;
    public description: string;
    public reviews: number;
    public tags: Array<string>
    public content: string
    public fileExtension: string
    public comments: Array<string>;
    public ups: Array<string>;

    constructor(id: string, work_name: string, owner: string, description: string, reviews: number, tags: Array<string>, content: string, fileExtension: string, commments: Array<string>, ups: Array<string>) {
        this.id = id
        this.work_name = work_name
        this.owner = owner
        this.description = description
        this.reviews = reviews
        this.tags = tags
        this.content = content
        this.fileExtension = fileExtension
        this.comments = commments
        this.ups = ups
    }
}

初始排查思路 #

最初怀疑是works数组体积过大，setWorks执行耗时较长，还没执行完成就再次触发渲染，进而形成循环，该猜测后续未被证实。

最终问题根因 #

最终定位到错误出在WorkPost组件而非当前WorkList组件，虽然报错提示指向WorkList。问题是WorkPost中存在无控制的state更新，导致不断触发渲染、更新的循环，修复WorkPost中异常的state更新逻辑后问题解决。

内容的提问来源于stack exchange，提问作者Bernardo Rodrigues