为什么我的函数仍然在 react native 中返回一个承诺答案

【问题标题】：Why does my function still return a promisse in react native为什么我的函数仍然在 react native 中返回一个承诺
【发布时间】：2021-03-24 17:23:50
【问题描述】：

我获取值的函数正在返回一个我不知道如何等待解决的承诺。我失败的代码：

const [rednderSaves, setRenderSaves] = React.useState([])
  const saveRenders = async () => {
    var data = await JSON.parse(await AsyncStorage.getItem("connections"))
    for (var i = 0; i < data.length; i++) {
      data[i].data = await JSON.parse(await data[i].data)
    }
    setRenderSaves(data)
  }
{saveRenders().then(rednderSaves.map(save => {
                return <Text key={Date.now()}>{save.name}</Text>
}))}

这个过于复杂的事情仍然会带来承诺。在过去的 4 个小时里，我一直在挠头，请终于有人帮忙。提前致谢

【问题讨论】：

看看承诺链。可能会有所帮助！不确定！你想做什么。如果可能，请详细说明问题。
我已经做到了，关于它的一切都表明我的代码应该可以工作.....
试试这个。 rednderSaves.length?rednderSaves.map(save => { return <Text key={Date.now()}>{save.name}</Text> }):null
文本无法显示
用<div>Testing</div>代替这个<Text key={Date.now()}>{save.name}</Text>。有用吗

标签： reactjs react-native asyncstorage

【解决方案1】：

chained then 总是返回另一个承诺。正确的方法是在 useEffect 生命周期中正确加载数据。

const [renderSaves, setRenderSaves] = React.useState([])
  React.useEffect(() => {
    const saveRenders = async () => {
      const data = JSON.parse(await AsyncStorage.getItem("connections"))
      for (let i = 0; i < data.length; i++) {
        data[i].data = JSON.parse(data[i].data)
      }
      setRenderSaves(data)
    }

    saveRenders()
  }, [])
  
  return (
    <>
      // ... content
      { renderSaves.map(save => <Text key={Date.now()}>{save.name}</Text>) }
    </>
  )

【讨论】：

fwiw 不要使用var，使用const 或let。 JSON.parse 也不会返回一个让你等待的承诺。
renderSaves 最初将是一个空数组。应该有条件
好的，可以，但是我会在我们进行的时候添加到数据库中，那么我该如何处理呢？
@AndrewNedoma 这取决于您作为we go 的意思。那可能更适合另一个问题。如果您的意思是数据库可能会更改并且您想收听它，那么就需要一些套接字实现。如果您有一些表单提交请求而不是成功响应，您将更新您的数据。
@Vibhav 如果renderSaves 在某些时候可能不是数组，您将需要一个安全条件。一个空数组将返回另一个空数组，这对于反应 afaik 是可以接受的。但是，如果出现不一致，您可以添加一些安全保护条件以避免崩溃。

【解决方案2】：

试试这个

const [rednderSaves, setRenderSaves] = React.useState([])
  React.useEffect(()=>{
    saveRenders() 
  },[])
  const saveRenders = async () => {
    var data = await JSON.parse(await AsyncStorage.getItem("connections"))
    for (var i = 0; i < data.length; i++) {
      data[i].data = await JSON.parse(await data[i].data)
    }
    setRenderSaves(data)
  }
   return (
    <>
     {
      rednderSaves.length?rednderSaves.map(save => (
       <Text key={Date.now()}>{save.name}</Text>
      )):
     null
     }
    </>
)

【讨论】：