功能元件React - 更新一個狀態會導致整個頁面重新渲染

Question

非常感謝您提前的幫忙。 我不確定為什麼當我在loadDataFunction()中更新percentageDone狀態時，它會更新RenderData1Component，而實際上它不應該這樣。它不應該只在data1改變時更新嗎？

我有這樣一段程式碼。

const [loading, setLoading] = useState(true);
  const [data1, setData1] = useState(null);
  const [percentageDone, setPercentageDone] = useState(0);


  LoadDataFunction(){
    // 在一個promise中呼叫多個api（假設有10個），並在每個api完成時呼叫setPercentageDone（）。
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     if (滿足條件) {
       LoadDataFunction() // 重新載入最新數據
     }
  }, [條件])

  return (
    loading ? percentageDone
            : <RenderData1Component data={data1}>
  )

我只想在更新data1狀態時才更新，而不是percentageDone<，而不是percentageDone< /code>。但每當我更新setPercentageDone()時，它也會觸發的重新渲染。

Answer 1

我不確定，但這可能對你有幫助。

const [loading, setLoading] = useState(true);
const [data1, setData1] = useState(null);
const [percentageDone, setPercentageDone] = useState(0);

const loadDataFunction = async () => {
  // 执行 API 调用并更新 percentageDone
};

useEffect(() => {
  loadDataFunction().then(() => {
    setLoading(false);
  });
}, []);

useEffect(() => {
  if (condition) {
    setLoading(true);
    loadDataFunction().then(() => {
      setLoading(false);
    });
  }
}, [condition]);

return (
  loading ? (
    <div>{percentageDone}% 加载中...</div>
  ) : (
    <RenderData1Component data={data1} />
  )
);

可能你正在給出多個條件，這可能會導致問題。也請檢查一下。