Блог

Главная - Вопросы по программированию - Почему я получаю сетевую ошибку при обновлении страницы? (получить запрос)

Почему я получаю сетевую ошибку при обновлении страницы? (получить запрос)

#javascript #reactjs #api #axios #next.js

Вопрос:

Я делаю запрос get к API в useEffect(). Когда я перехожу на страницу с главной страницы, она загружается нормально, но как только я обновляю страницу http://localhost:3000/coins/coin , я получаю Unhandled Runtime Error: Error: Network Error .

 export async function getServerSideProps({ query }) {  const id = query;  return {  props: { data: id },  }; }  function index({ data }) {  const coinURL = data.id; // bitcoin  const apiEndpoint = `https://api.coingecko.com/api/v3/coins/${coinURL}`;  const [currentUser, setCurrentUser] = useState();  const [coinData, setCoinData] = useState([]);   useEffect(() =gt; {  const getData = async () =gt; {  const res = await axios.get(apiEndpoint);  const { data } = res;  setCoinData(data);  };  const getCurrentUser = async () =gt; {  const res = await axios.get(  `http://localhost:5000/api/users/${session?.id}`  );  const { data } = res;  setCurrentUser(data);  };  getData();  getCurrentUser();   }, [coinData, currentUser]); }

Почему это происходит?

Комментарии:

1. пожалуйста, поделитесь более подробным фрагментом кода, чтобы мы могли ответить на него. Вероятно, ваш apiEndpoint исходит от реквизита.

2. Я использую getServerSideProps для получения параметра url. Затем передайте этот идентификатор в реквизит основной функции. const apiEndpoint = https://api.coingecko.com/api/v3/coins/${coinURL}

Ответ №1:

Я рекомендую сделать что-то подобное:

 const getData = async () =gt; {  try {  const res = await axios.get(apiEndpoint);  const { data } = res;  setCoinData(data);  } catch(err) {  console.log(err)  } };  const getCurrentUser = async () =gt; {  try {  const res = await axios.get(  `http://localhost:5000/api/users/${session?.id}`  );  const { data } = res;  setCurrentUser(data);  } catch(err) {  console.log(err)  } };  useEffect(() =gt; {  getData();  getCurrentUser();  }, [coinData, currentUser]);

если вы сделаете это, вы сможете просмотреть точную ошибку и исправить ее.

Комментарии:

1. Это, казалось, решало проблему само по себе. Хотя я немного не понимаю, почему… Это потому, что я определил функции вне эффекта использования, прежде чем вызывать их? или это просто потому, что была добавлена попытка поймать?

2. на самом деле теперь его ошибка регистрации прерывает запрос в бесконечном цикле, из-за чего firefox не отвечает

Метки: