时间戳

首页 > 解决方案 > 我怎样才能摆脱这个不需要的重新渲染循环？

reactjs - 我怎样才能摆脱这个不需要的重新渲染循环？

问题描述

这是我现在的代码（在 App.tsx 中）：

const [taskState, setTaskState] = useState([] as TaskModel[])

useEffect(() => {
        fetch("/task")
            .then(res => res.json())
            .then(responseParamerter => {
                var a = responseParamerter
                a.map((task: TaskModel) => {
                    const newTask = {
                        TaskID: task.TaskID,
                        Status: task.Status,
                        TaskName: task.TaskName,
                        TaskText: task.TaskText
                    } as TaskModel
                    setTaskState([...taskState, newTask])
                })
            })
    }, [taskState])

但是现在我的问题来了，setTaskState 出于某种原因触发了重新渲染（或者它至少触发了 useEffect），但是 useEffect 使用了触发 useEffect 的 setTaskState。获取请求的数量很快就达到数百个，但我不知道我能做些什么。提前致谢

标签： reactjstypescriptreact-hooks

解决方案

当您可以一次设置所有任务时，不确定为什么要一一设置任务：

    useEffect(() => {
        fetch("/task")
            .then(res => res.json())
            .then(responseParamerter => {
                setTaskState(responseParamerter
                    .map((task: TaskModel) => {
                        return {
                            TaskID: task.TaskID,
                            Status: task.Status,
                            TaskName: task.TaskName,
                            TaskText: task.TaskText
                        } as TaskModel

                    }))
            })
    }, [])

您使用 Array.prototype.map 错误，您忽略了回调的返回值

推荐阅读