如何在 React 中使用 useEffect() 防止无限重新渲染

如何解决如何在 React 中使用 useEffect() 防止无限重新渲染

我有一个应用程序，它会在启动时检查用户 ID 并根据登录的用户加载待办事项列表。我只有在 data 更改时才会更改 useEffect，但我有 setData在 useEffect() 的主体中，意味着 data 发生变化并且它无限地重新运行。

但是，如果我将第二个参数中的 [data] 更改为 []，则它会呈现一次，但每次我添加待办事项以使其呈现而不是自动呈现时，我都必须刷新页面。如何让它自动渲染而不无限循环？

const [data,setData] = useState([])

useEffect(() => {
    UserService.getUserById(localStorage.getItem("userId")).then(res => {
        if (res.data !== null) {
            setData(res.data.todos)
        }
    })
},[data])

解决方法

您可以在回调函数中添加一个条件来检查是否满足某个条件，例如如果数据为空。如果为空，则取数据，否则什么都不做。这将防止发生无限循环。

const getData =  useEffect(()=>{
  const fetchData = () => {
    UserService.getUserById(localStorage.getItem("userId"))
     .then(res => {
        if (res.data !== null) {
         setData(res.data.todos)
        }
      })
     .catch(error => {
        // do something with error
      })
  }
  
  if (data.length === 0) 
    fetchData()

},[data]);

或者，您可以使用一个空的依赖数组，以便调用 useEffect 中的回调函数一次。

,

useCallback Hook 可以在您的代码中稍加修改后使用。

您需要先从“react”导入 useCallback。

import {useCallback} from "react";

然后在我们的 useCallback 函数周围使用这个 getData。 （稍微修改了答案）

const getData =  useCallback(()=>{
    UserService.getUserById(localStorage.getItem("userId")).then(res => {
        if (res.data !== null) {
            setData(res.data.todos)
        }
    })
},[data]);


useEffect(() => {
   getData();
},[data])

此 React Hook 将确保 getData() 函数仅在第二个参数 data 更改时创建。

,

在您的代码中 UserService.getUserById(localStorage.getItem("userId")) 返回一个 promise 并且它一次获取数据，因此您只需在加载时使用 {{1} 调用一次 getUserById }} 并且如果您想再次调用它，请创建一个函数并在刷新函数或添加待办事项项或更新或删除函数的任何地方使用它。否则你必须使用 observable 或 useCallBack hook

,

您需要传递重置参数以防止循环。一旦回调触发重置值false。以便在重置值之前不会再次执行执行

Codesanbox

[]

,

通过设置一个条件来停止循环，从而使用一个条件来停止循环。您可以检查是否设置了某个值或检查是否有任何值发送。