在DOM加载时在useEffect中调用useEffect

Question

我正在构建一个应用程序来跟踪用户的习惯，当用户被定向到仪表板时，我希望他们立即看到他们的习惯是从数据库中提取出来的。我尝试过从useState内部调用useEffect，但我知道这样做存在固有的问题。我已经尝试向useEffect提供第二个参数来解决这个问题，但是仍然收到一个无效的钩子调用错误。

const Dashboard = () => {
  const [refetch, setRefetch] = useState(true);
  const [habits, setHabits] = useState([]);
  useEffect(() => {
    if(refetch){
      fetch('/habits/getHabits', {
        method: "POST",
        headers: {"Content-Type": "application/json; charset=UTF-8"},
        body: JSON.stringify({username: 'Phil'})
      })
      .then((data) => data.json())
      .then((data) => {
        const habitCards = [];
      for(let habit of data.habits){
        habitCards.push(
          <Habit 
          key={habit.habitid}
          habitname={habit.habitname}
          moneyspent={habit.moneyspent}
          lasttime={habit.lasttime} 
          />
        )
      }
      setHabits(habitCards);
    })
    .finally(() => setRefetch(false))
    }
  }, [refetch])
  return (
    <div className='dash'>
      <h1>Your habits:</h1>
      {habits}
    </div>
  )
}

我如何修改它，以便只在页面加载时调用useEffect，并从页面中更新状态？

Answer 1

如果希望在页面加载时只运行一次效果，则将一个空依赖数组[]作为第二个参数传递。

当您传递一个空的依赖项数组时，您会告诉React，这种效果不依赖于道具或状态的任何值，并且它永远不需要重新运行。

  useEffect(() =>
  {
      fetch('/habits/getHabits', {
        method: "POST",
        headers: {"Content-Type": "application/json; charset=UTF-8"},
        body: JSON.stringify({username: 'Phil'})
      })
      .then((data) => data.json())
      .then((data) => {
        const habitCards = [];
        for(let habit of data.habits){
          habitCards.push(
            <Habit 
              key={habit.habitid}
              habitname={habit.habitname}
              moneyspent={habit.moneyspent}
              lasttime={habit.lasttime} />
        )
      }
      setHabits(habitCards);
    })
  }, [])

在这种情况下，您将不再需要refetch状态变量。

您可以阅读更多关于跳过效果这里的内容。