recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>Merci beaucoup pour votre aide par avance. Je ne sais pas pourquoi, lorsque je mets à jour l'état <code>percentageDone</code> dans <code>loadDataFunction()</code>, il met à jour <code>RenderData1Component</code> ça ne sera pas comme ça. Ne devrait-il pas être mis à jour uniquement lorsque data1 change ? </p> <p>J'ai un morceau de code comme celui-ci. </p> <pre class="brush:php;toolbar:false;">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 : <RenderData1Component data={data1}> )</pré> <p>Je souhaite uniquement mettre à jour <code><RenderData1Component data={data1}></code> lorsque l'état <code>data1</code> /code>. Mais chaque fois que je mets à jour <code>setPercentageDone()</code>, cela déclenche également un nouveau rendu de <code><RenderData1Component data={data1}></code>. </p>
P粉180844619P粉180844619469 Il y a quelques jours404

répondre à tous(1)je répondrai

  • P粉904405941

    P粉9044059412023-08-18 11:26:59

    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.

    répondre
    0
  • Annulerrépondre