时间戳

首页 > 解决方案 > React Native Promise、setState 和 Navigation 问题

reactjs - React Native Promise、setState 和 Navigation 问题

问题描述

我是堆栈溢出的新手，所以我希望我能正确发布内容。我正在使用 React、React Native 和 React Navigation。基本上，我需要帮助来从一个屏幕导航到下一个屏幕并传递从获取请求中获取的数据。似乎代码有效，但 setState 在导航之前不会发生。如果我转到上一个屏幕并再次向前导航，则响应就在那里。

非常感谢您的帮助。谢谢！

const [allResources, setAllResources] = React.useState([])
 
function getallresources() {
    fetch('API url', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        info: info1,
        info2: info2,
      }),
    })
    .then((response) => response.json())
    .then((responseJson) => setAllResources(responseJson.allResources)
    .then(()=> navigation.navigate("AllResources", {allResources: allResources})
    )
    .catch((error) => {
      console.error(error);
    });
  }

标签： reactjsreact-nativereact-navigation

解决方案

setState不是同步的，尽管我不确定这真的是问题所在。我会尝试responseJson.allResources直接传递并查看是否可以调试状态更新是否是问题：

const [allResources, setAllResources] = React.useState([])
 
function getallresources() {
    fetch('API url', {...} ),
    })
    .then((response) => response.json())
    .then((responseJson) => {
       setAllResources(responseJson.allResources)
       navigation.navigate("AllResources", {allResources: responseJson.allResources})
    })
    .catch((error) => {
      console.error(error);
    });
  }

如果这有效，也许setState真的是问题所在。如果是这样，您可以从这样的导航useEffect：

useEffect( () => {
  if (allResources){
    navigation.navigate("AllResources", {allResources: allResources})
  }
}, [allResources])

（当然要navigation.navigate取消.then回调。）如果这不起作用，你必须看看你是如何在 AllResources 屏幕中访问allResources你的。params

推荐阅读