Functional Components React - la mise à jour d'un état entraîne le nouveau rendu de la page entière

Question

Merci beaucoup pour votre aide par avance. Je ne sais pas pourquoi, lorsque je mets à jour l'état percentageDone dans loadDataFunction(), il met à jour RenderData1Component ça ne sera pas comme ça. Ne devrait-il pas être mis à jour uniquement lorsque data1 change ?

J'ai un morceau de code comme celui-ci.

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


  LoadDataFunction(){
    // Appelez plusieurs API (disons qu'il y en a 10) dans une seule promesse et appelez setPercentageDone() lorsque chaque API est terminée.
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     si (condition satisfaite) {
       LoadDataFunction() // Recharger les dernières données
     }
  }, [condition])

  retour (
    chargement pourcentageFait
            : 
  )
Je souhaite uniquement mettre à jour  lorsque l'état data1 /code>. Mais chaque fois que je mets à jour setPercentageDone(), cela déclenche également un nouveau rendu de . 
            

Answer 1

Je ne suis pas sûr, mais cela pourrait vous aider.

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

Peut-être que vous donnez plusieurs conditions, ce qui peut causer des problèmes. Veuillez vérifier cela également.