在渲染 UI 之前，如何从 async/await function 获取数据？

Question

I am working out on Github API and using an async/await function to get a list of user's repository.

The problem I am facing is, I am using a Dropdown component where I have to provide an array full of repo list which will work as a dropdown, and that array data is coming from the async/await function.

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

Therefore, the UI renders before the function gets executed, and the items array turns out to empty.

    <>

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

    </>

I am using the spread operator to get data in my Dropdown component

How do I make sure that I do get data in the items prop from the async-await function, I believe the function cannot be synchronous as well since it is handling the API request. What could be a good strategy for this problem?

Any help is really appreciated.

Thank You

Answer 1

You could initialise your list data with a falsy value, say null and use a ternary operator to stop the Dropdown UI from rendering until your API call finishes executing and populates your list data with the array. This would be 'truthy' value and then your Dropdown could be rendered.

Answer 2

You'll have to use useState and useEffect to achieve this if you are using hooks based components. It will look something like this

const [list, setList] = useState([]);

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

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

useEffect(() => {
  (async () => {
    await fetchRepos();
  })();
}, []);

Answer 3

Can try below solution

const [isShowDropdown, setDropdown] = useState(false);
 const list = []

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

Render dropdown like this

 <>

        {isShowDropdown?<DropDown items={[...list] || [] } placeholder='Select a Repository' />:null}

    </>