如何解決 React 渲染問題？

Question

我有一個非常簡單的組件，它可以獲取數據並進行一些簡單的計算。 每次頁面刷新組件渲染時，值都會改變。 我也嘗試過清除緩存，認為這可能是一個問題，但並沒有解決問題。 謝謝您的幫助！

我已經嘗試刪除並收到一條警告，其中包含一條建議添加difference的消息，但即使沒有它，它在每個渲染中的行為仍然相同。 我使用這樣difference值

const [revenue, setRevenue] = useState([]);
  const [difference, setDifference] = useState(0);

  useEffect(() => {
    const getRevenue = async () => {
      try {
        const res = await adminRequest.get("/orders/incomestats");
        setRevenue(res.data);
        console.log(res.data);
        setDifference((res.data[1].total * 100) / (res.data[0].total - 100));
        console.log(difference);
      } catch (error) {
        console.log(error);
      }
    };
    getRevenue();
  }, [difference]);

這是我使用價值difference的地方

%{Math.floor(difference)}
            {difference < 0 ? (
              <ArrowDownward />
            ) : (
              <ArrowUpward />
            )}

Answer 1

每個 state 更改都會生成組件渲染。 您正在收聽“差異”變量更改並使用 setDifference 再次更改它，從而創建一個循環。

這個

useEffect(()=>{
   setState(something)
},[state])

利用

useEffect(()=>{
   setState(something)
},[])