在呈现UI之前如何从async / await函数中获取数据？

Question

我正在研究Github API，并使用async / await函数来获取用户存储库列表。

我面临的问题是，我正在使用Dropdown component，其中我必须提供一个完整的存储库列表数组，该列表将作为下拉列表使用，并且该数组数据来自async / await函数。

  const list = []

  async function fetchRepos() {
    await octokit.repos
      .listForUser({
        username: 'abhinav-anshul',
      })
      .then((details) => list.push(details.data[0].name))

    console.log('List Array', list)
    console.log([...list])
  }

因此，UI在函数执行之前呈现，并且items array变为空。

    <>

        <DropDown items={[...list]} placeholder='Select a Repository' />

    </>

我正在使用spread operator获取我的Dropdown component中的数据

我如何确保从async-await函数的道具中获取数据，我相信该函数也不能同步，因为它正在处理API请求。什么是解决这个问题的好策略？

非常感谢您的帮助。

谢谢

Answer 1

您可以使用伪造的值初始化列表数据，将其设置为null并使用三元运算符来阻止Dropdown UI呈现，直到您的API调用完成执行并使用数组填充列表数据为止。这将是“真实”的值，然后可以渲染您的Dropdown。