首頁  >  問答  >  主體

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

<p>非常感謝您提前的幫忙。 我不確定為什麼當我在<code>loadDataFunction()</code>中更新<code>percentageDone</code>狀態時,它會更新<code>RenderData1Component</code>,而實際上它不應該這樣。它不應該只在data1改變時更新嗎? </p> <p>我有這樣一段程式碼。 </p> <pre class="brush:php;toolbar:false;">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}> )</pre> <p>我只想在更新<code>data1</code>狀態時才更新<code><RenderData1Component data={data1}></code>,而不是<code>percentageDone<</code>,而不是<code>percentageDone< /code>。但每當我更新<code>setPercentageDone()</code>時,它也會觸發<code><RenderData1Component data={data1}></code>的重新渲染。 </p>
P粉180844619P粉180844619451 天前385

全部回覆(1)我來回復

  • P粉904405941

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

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

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

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

    回覆
    0
  • 取消回覆