Question

我是堆栈溢出的新手，所以我希望正确发布内容。我正在使用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);
    });
  }

Answer 1

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我们的{您的params中的所有资源。

反应本机Promise，setState和导航问题

1 个答案: