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