Этот код не показывает ошибку компиляции, но консоль не будет отображаться

#javascript #reactjs #api

Вопрос:

 import React from 'react';

const url = 'https://randomuser.me/api/?results=10'

async function List() {

    const data = await fetch (url)
    const response = await data.json()

    return (
        <div>
            {response.map((item)=>(
            <div>{item.results[1].name.first}</div>
            ))}
        </div>
        
    )
}

Он также выдает следующее: Вышеуказанная ошибка произошла в компоненте:

 at List
at div
at App

Подумайте о добавлении границы ошибки в дерево, чтобы настроить поведение обработки ошибок.
Посещение https://reactjs.org/link/error-boundaries чтобы узнать больше о границах ошибок.

1. прочитайте документы о выполнении http — запросов в react

2. «Вышеуказанная ошибка» — не могли бы вы показать нам и эту ошибку тоже?

3. Это было решено, большое спасибо, братан.

Ответ №1:

Если вы работаете с functional компонентом. Вам нужно использовать React hooks для вызовов API. Вы можете использовать useEffect крючки для вызова API.

Пример:

 const { useState } = React;

function useFetchData() {

  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    return fetch("https://randomuser.me/api/?results=10")
      .then((response) => response.json())
      .then((responseJson) => {
        setData(responseJson.results);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return { data };
}

function App() {

  const { data } = useFetchData();

  return (
    <div id="quote-box">
      {data.map((item) => (
        <div>{item.name.first}</div>
      ))}
    </div>
  );

}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

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

Ответ №2:

Вызов API внутри компонента является побочным эффектом, и React этого не хочет. Компоненты React ожидают, что вы предоставите данные и немедленно отобразите их. Если вы хотите вызвать API перед визуализацией компонента, используйте метод побочных эффектов, например useEffect() , и вызовите этот API внутри лямбды. Теперь компонент знает, что есть ожидаемый побочный эффект, и будет повторно отображаться после обновления данных.