React Native-useState集数据更新延迟

Question

因此，在我的应用程序中，我的按钮应该设置我的数据，然后导航到下一页。这里的问题是数据更新得不够快(我认为(。控制台显示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之后使用它。

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

Answer 2

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

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