反应：太多的重新渲染。 React 限制渲染次数以防止无限循环

Question

谁能帮帮我。基本上我在一个学校项目中使用 React 和 Typescript，突然间发生了这个错误，我不明白为什么......我尝试用一​​个布尔状态和一个简单的 Work[] 来解决它，两种状态，它总是吐出同样的错误：重新渲染太多，我无法想象为什么。拯救我的好心人，谢谢你

这是我的组件

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

这是我的工作对象

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
    }

}

我目前的想法是我的作品数组非常大，因此需要一段时间才能完成 setWorks 并且尚未完成，它会一次又一次地渲染。我可能完全错了......

输出是这样的：Error message Error Output - Console

更新：错误出现在WorkPost 组件中，而不是在这里，即使它说它在这里。我有一个状态在没有控制或审查的情况下更新，所以它正在渲染、更新、渲染等。 感谢您的所有帮助！

Answer 1

过多的重新渲染意味着你在某处有一个无限循环。我要做的是：为作品添加一个默认值=>

const [works, setWorks] = useState<Work[]>([])

您还可以查看 listOfWorks 的回复吗？因为这可能是空的，所以更改工作的引用，重新触发 useEffect 回调并启动无限循环。

为什么需要在 useEffect 中将作品作为依赖项？您可以删除它，将一个空列表作为依赖项，并在挂载后让此代码运行一次。

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