Funktionale Komponenten reagieren: Das Aktualisieren eines Status führt dazu, dass die gesamte Seite neu gerendert wird

Question

Vielen Dank für Ihre Hilfe im Voraus. Ich bin mir nicht sicher, warum, wenn ich den Status loadDataFunction() aktualisiere, obwohl dies eigentlich nicht der Fall sein sollte Das soll nicht so sein. Sollte es nicht nur aktualisiert werden, wenn sich data1 ändert?

Ich habe so einen Code.

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


  LoadDataFunction(){
    // Rufen Sie mehrere APIs (sagen wir, es sind 10) in einem Versprechen auf und rufen Sie setPercentageDone() auf, wenn jede API abgeschlossen ist.
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     if (Bedingung erfüllt) {
       LoadDataFunction() // Die neuesten Daten neu laden
     }
  }, [Zustand])

  zurückkehren (
    Laden ? ProzentsatzFertig
            : <RenderData1Component data={data1}>
  )

Ich möchte nur aktualisieren, wenn der Status von data1 aktualisiert wird. /code>. Aber wenn ich setPercentageDone() aktualisiere, wird auch ein erneutes Rendern von ausgelöst.

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} />
  )
);

可能你正在给出多个条件，这可能会导致问题。也请检查一下。