0

Есть асинхронная функция, которая возвращает promis с данными. Как вывести эти данные внутри компонента? В примере ниже в {data} ничего не выведется, так как функция ещё не успела отработать. Какие существуют способы это исправить?

async function someAsyncFunction() {
  /*...*/
  return 'result'
}

function App() {
  const [data, setData] = useState('')

  setData(someAsyncFunction())

  return (
    <div>
      {data}
    </div>
  )
}

1 ответ 1

1

Вам надо воспользоваться ф-ией useEffect:

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script type="text/babel">
const {useState, useEffect} = React;

async function someAsyncFunction() {
  try {
    const response = await fetch('https://rickandmortyapi.com/api/character/1');
      
    if (response.ok) {
      return await response.json();
    } else {
      console.log("Can't get data");
    }
  } catch (e) {
    console.log(e);
  }
}

function App() {
  const [name, setName] = useState('');
  
  useEffect(() => {
    async function datesInit() {
      const data = await someAsyncFunction();
      setName(data.name);
    }
    
    datesInit();
  }, [])
  
  return (
    <div>
      {name}
    </div>
  );
}

// Рендеринг
ReactDOM.render(
  <App />,
  document.getElementById('react')
);
</script>

3
  • Спасибо, подход помог, но если написать анонимную функцию как вы предлагаете, появляются эти ошибки, не подскажете, почему? Warning: useEffect must not return anything besides a function, which is used for clean-up. Uncaught TypeError: destroy is not a function react-dom.development.js:18572 The above error occurred in the <App> component
    – Unicode101
    2 июн 2022 в 13:07
  • А если внутри useEffect оформить как отдельную функцию, а потом вызвать, то работает: useEffect(() => { async function datesInit() { //... } datesInit() }, [])
    – Unicode101
    2 июн 2022 в 13:07
  • 1
    @Unicode101 А, точно)) Забыл об этом) Дело в том что как и говорится в самой ошибке ф-ия переданная в useEffect должна либо возвращать ничего, либо ф-ию. Это ф-ия в дальнейшем отработает при размонтировании компоненты. А когда пишешь async сразу, то ему возвращается Promise, который надо отдельно отрабатывать, чего useEffect не может сделать. Пример поправлю скоро
    – EzioMercer
    2 июн 2022 в 13:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.