Komponen Berfungsi Bertindak balas - mengemas kini keadaan menyebabkan keseluruhan halaman dipaparkan semula

Question

Terima kasih banyak atas bantuan anda terlebih dahulu. Saya tidak pasti mengapa apabila saya mengemas kini percentageDone keadaan dalam loadDataFunction() ia mengemas kini RenderData1Component jangan jadi begini. Bukankah ia sepatutnya hanya dikemas kini apabila data1 berubah?

Saya mempunyai sekeping kod seperti ini.

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


  LoadDataFunction(){
    // Panggil berbilang apis (katakan terdapat 10) dalam satu janji dan panggil setPercentageDone() apabila setiap api selesai.
  }
  useEffect( () ==> {
     LoadDataFunction()
  },[])
  useEffect( () ==> {
     jika (keadaan berpuas hati) {
       LoadDataFunction() // Muat semula data terkini
     }
  }, [syarat])

  kembali (
    memuatkan peratusanSelesai
            : 
  )
Saya hanya mahu mengemas kini  apabila data1 /kod>. Tetapi apabila saya mengemas kini setPercentageDone(), ia juga mencetuskan pemaparan semula . 

Answer 1

Saya tidak pasti, tetapi ini mungkin membantu anda.

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

Mungkin anda memberikan beberapa syarat, yang boleh menyebabkan masalah. Sila semak ini juga.