React Native - useState 设置数据更新延迟

Question

所以在我的应用程序中，我的按钮应该设置我的数据，然后导航到下一页。这里的问题是数据更新不够快（我认为）。控制台显示 null（这是我设置的初始数据），然后它导航到包含空数据的下一页。如果我回到上一页再去下一页，它会携带之前没有发送的数据。我尝试了 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

YES setstate 需要一些时间来更新，您可以直接将数据发送到您的导航功能

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

Answer 2

试试这个方法

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

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

Answer 3

usestate 是异步的，你不能真正为它创建 await 函数有两种方法，其中一种是使用 useEffect 挂钩像下面这样，你可以在一个函数中有多个 useEffect 使用 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);
  };

React Native - useState 设置数据更新延迟

React Native - useState set data update late

javascript

react-native

use-state