Как вывести информацию в react-компонент из асинхронной функции?

Question

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

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

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

  setData(someAsyncFunction())

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

Answer 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>

БЛОГ НА HUSL

Как вывести информацию в react-компонент из асинхронной функции?

Ответы (1 шт):