React Native - useState 設置數據更新較晚

Question

所以在我的應用程序中，我的按鈕應該設置我的數據，然后導航到下一頁。 這里的問題是數據更新速度不夠快（我認為）。 控制台顯示 null（這是我設置的初始數據），然后導航到帶有 null 數據的下一頁。 如果我 go 回到上一頁然后 go 再到下一頁，它會攜帶之前沒有發送的之前的數據。 我嘗試了 setTimeout，但我想這是使用 setTimeout 的錯誤方法。

  const [foto, setFoto] = useState(null);

  const sendQUtest = () => {
    setFoto('QUtest');
    setTimeout(() => {
      console.log('assessmentTimeout: ' + foto);
    }, 5000);
    console.log('assessment: ' + foto);
    navigator.navigate('pembayaranAssessment', foto);
  };
  const sendTOPtest = () => {
    setFoto('TOPtest');
    console.log('assessment: ' + foto);
    navigator.navigate('pembayaranAssessment', foto);
  };

我想知道是否還有等待數據的方法。 我在其他問題中看到的解決方案是使用 useEffect，但在這個問題中，我在 onPress 之后需要它。

Answer 1

usestate 是異步的，你不能真正等待 function 因為它有兩種方法，其中一種是使用useEffect掛鈎，如下所示，你可以在一個 function 使用 useEffect 檢查值何時更改然后導航

    const [foto, setFoto] = useState(null);
       useEffect(()=>{
//this will fire  at the beginning and on foto changing value
if(foto == null){
//will ignore first run
}else{ navigator.navigate('pembayaranAssessment', foto); 
}},[foto])

  const sendQUtest = () => {
    setFoto('QUtest');
    setTimeout(() => {
      console.log('assessmentTimeout: ' + foto);
    }, 5000);
    console.log('assessment: ' + foto);
    //navigator.navigate('pembayaranAssessment', foto);
  };
  const sendTOPtest = () => {
    setFoto('TOPtest');
    console.log('assessment: ' + foto);
   // navigator.navigate('pembayaranAssessment', foto);
  };

Answer 2

YES setstate 需要一些時間來更新，您可以直接發送數據到您的導航 function

navigator.navigate('pembayaranAssessment', 'TOPtest');

Answer 3

試試這個方法

 const sendQUtest = () => {
    setFoto('QUtest');
    setTimeout(() => {
      navigator.navigate('pembayaranAssessment', foto); // add here
    }, 200);
  };

  const sendTOPtest = () => {
    setFoto('TOPtest');
    setTimeout(() => {
      navigator.navigate('pembayaranAssessment', foto); // add here
    }, 200);
  };