Использование асинхронной функции извлечения внутри useEffect и рендеринга на страницу - PullRequest
Новая
       3

Использование асинхронной функции извлечения внутри useEffect и рендеринга на страницу

0 голосов
/ 24 февраля 2020

Здравствуйте, у меня есть вопрос о вызове fetch внутри componentDidMount. Вот пример кода: 

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  }, []);
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

Здесь 

useEffect(()=>{},[]);

Это то же самое, что и componentDidMount.

Внутри useEffect мы извлекаем данные с сервера и сохраняем их в data. Затем data используется для отображения элементов на странице как <li> элементов.

У меня такой вопрос, выполняется ли вызов fetch (ie. Ax ios) ПОСЛЕ ТОГО, КАК App компонент монтируется в первый раз? Если так, как data заполняется вовремя для первого рендеринга? 

<ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
 </ul>

Насколько я понимаю, поскольку data заполняется ПОСЛЕ первого монтирования, оно не будет доступно для рендеринга?

Может быть, я неправильно понимаю разницу между МОНТАЖОМ и РЕНДЕРИНГОМ?

Может кто-то исправить меня, потому что приведенный выше код, очевидно, работает.

Спасибо.

1 Ответ

1 голос
/ 24 февраля 2020

Ну, он не заполнен, но пустой массив все еще существует, поэтому код не обрабатывает sh. Когда компонент монтируется и выполняет первый рендеринг, data.hits равен пустому массиву, []. Таким образом, вы можете нанести на него карту, но длина равна 0, поэтому карта ничего не выдаст. Если изначально вы определили data.hits как пустой объект, или ноль или что-то, например, const [data, setData] = useState({});, ТО тогда это будет sh, потому что изначально data.hits равно undefined, и вы получите ошибку Can't read property .map of undefined

...