Funktionale Komponenten reagieren: Das Aktualisieren eines Status führt dazu, dass die gesamte Seite neu gerendert wird
P粉180844619
P粉180844619 2023-08-17 14:19:48
0
1
402
<p>Vielen Dank für Ihre Hilfe im Voraus. Ich bin mir nicht sicher, warum, wenn ich den Status <code>loadDataFunction()</code> aktualisiere, obwohl dies eigentlich nicht der Fall sein sollte Das soll nicht so sein. Sollte es nicht nur aktualisiert werden, wenn sich data1 ändert? </p> <p>Ich habe so einen Code. </p> <pre class="brush:php;toolbar:false;">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}> )</pre> <p>Ich möchte <code><RenderData1Component data={data1}></code> nur aktualisieren, wenn der Status von <code>data1</code> aktualisiert wird. /code>. Aber wenn ich <code>setPercentageDone()</code> aktualisiere, wird auch ein erneutes Rendern von <code><RenderData1Component data={data1}></code> ausgelöst. </p>
P粉180844619
P粉180844619

Antworte allen(1)
P粉904405941

我不确定,但这可能对你有帮助。

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

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage