Как извлечь ценность из обещания и отобразить ее в ответ?

Question

Я создаю приложение React с Supabase в качестве бэкэнда. Я хотел бы отобразить содержимое нескольких моих таблиц supabase в React. Однако я извлекаю эти данные с обещанием, и я не уверен, как отобразить их в React. Ниже мой код:

      SupaBase API Call: 

    async function getData() {
      const {data, other} = await getWriters().then(
        function(response) {
          for (var i = 0; i < response.length; i++) {
            var writerInfo = {}
            writerInfo['username'] = response[i].username
            writerInfo['bio'] = response[i].bio
            // console.log('Writer Name: ', response[i].username);
            // console.log('Writer Bio: ', response[i].bio);
            getTagIds(response[i].writerId).then(
              function(response2) {
                for (var j = 0; j < response2.length; j++) {
                  getTagNames(response2[j].tag_id).then(
                    function(response3) {
                      writerInfo['categories'] = []
                      // console.log('Categories: ')
                      for (var k = 0; k < response3.length; k++) {
                        // console.log(response3[k].tag_name)
                        writerInfo['categories'] = response3[k].tag_name
                      }
                    }
                  )
                }
              }
            )
          }
          return writerInfo['username']
        }
      )
      return data
    }

Код реакции:

      export default function BrowsePage() {
  const classes = useStyles();
  const [listOfWriters, setListOfWriters] = useState({});

  const fetchData = async () => {
      setListOfWriters(getWriters())
    }


    console.log(getData())

  return (
    <Grid container spacing={3}>
      <Grid item sm={12}>
      <Navbar />
      </Grid>
      <Grid item xs={12} className={classes.root}>
      {getData}
      
      </Grid>
      <Grid item sm={12}>
      <Footer />
      </Grid>
    </Grid>
  );
}

Answer 1

Вы можете сделать это так.

      const useWriterList = () => {
  const [listOfWriters, setListOfWriters] = useState([]);
  useEffect(async () => {
    try {
      setListOfWriters(await getData());
    } catch (e) {}
  }, []);
  return listOfWriters;
};

export default function BrowsePage() {
  //...
  const listOfWriters = useWriterList();

  return (
    <Grid container spacing={3}>
      //...
      {listOfWriters.map(writer => (
        <div>
          {writer.name}
        </div>
      ))}
      //...
    </Grid>
  );
}