React Native - useState 设置数据更新较晚答案

【问题标题】：React Native - useState set data update lateReact Native - useState 设置数据更新较晚
【发布时间】：2021-11-18 12:42:38
【问题描述】：

所以在我的应用程序中，我的按钮应该设置我的数据，然后导航到下一页。这里的问题是数据更新速度不够快（我认为）。控制台显示 null（这是我设置的初始数据），然后导航到带有 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 之后使用它。

【问题讨论】：

标签： javascript react-native use-state

【解决方案1】：

usestate 是异步的，你不能真正为它创建一个等待函数有两种方法，其中一种是使用 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);
  };

【讨论】：

【解决方案2】：

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

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

【讨论】：

同意，我会直接传值

【解决方案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);
  };

【讨论】：