React генерирует бесконечные ошибки при извлечении из api

#javascript #reactjs

Вопрос:

Я новичок в React.js , и я пытаюсь извлечь из api состояние . Но когда я делаю это, после изменения json-кода из api или через некоторое время, я получаю бесконечные ошибки: TypeError: Failed to fetch и Posts.js:10 GET http://localhost:3000/data net::ERR_CONNECTION_REFUSED .

Мой контроллер posts:

 import React, { useState } from 'react';
import Post from './Post';
import axios from 'axios';


const Posts = () => {
    const [posts, setPosts] = useState([]);


    fetch("http://localhost:3000/data")
    .then(res => res.json())
    .then(
      (result) => {
        setPosts((prev) => prev = result);
      }
    )
    .catch((error) => {
        console.log(error);
      });

    return (
        posts.map((post, index) => (
            <Post name={post.name} content={post.content} key={index}/>
        ))
    );
}
export default Posts;

1. Похоже, проблема с вашим локальным сервером

2. Но это нормально получать бесконечные ошибки? И в моей консоли для моего API я получаю бесконечный запрос, пока я нахожусь на веб-сайте

3. Вы также должны извлекать только при первоначальном рендеринге — поместите fetch внутрь useEffect(fn, [])

Ответ №1:

Первым делом вам нужно обернуть вызов api в функцию. В противном случае он будет повторно отображать каждый раз, когда компонент отображает:

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


const Posts = () => {
    const [posts, setPosts] = useState([]);
    
    useEffect(() => {
    fetchPost();
     },[])

    const fetchPost = () => {
        fetch("http://localhost:3000/data")
        .then(res => res.json())
        .then(
        (result) => {
          setPosts((prev) => prev = result);
         }
        )
        .catch((error) => {
         console.log(error);
        });
     }

    return (
        posts.map((post, index) => (
            <Post name={post.name} content={post.content} key={index}/>
        ))
    );
}
export default Posts;

Если вам нужен только api when component, чем передавать пустой массив в качестве зависимости. В противном случае переменная, в которой вы хотите запустить fetchApi в useEffect([] <- здесь).

 Posts.js:10 GET http://localhost:3000/data net::ERR_CONNECTION_REFUSED

Эта ошибка обычно возникает, когда ваш сервер не работает

1. Это работает, но какой смысл состояния, если react извлекает данные из этого api только один раз?

2. Это похоже на выборку api при первой загрузке компонента. Если это одноразовые данные и только обновление. нечастые действия изменяют какие-либо данные, поэтому новая выборка не требуется. если вы передаете пустой массив [] в useEffect. Это работает как componentDidMount на основе классов. Но вы передали [переменную] в зависимость. Это своего рода рабочий componentDidUpdate , где он будет запускаться при изменении значения переменной

3. О, я понимаю, итак, вам нужно выбрать, хотите ли вы только одно обновление или обновлять при изменении, передавая или нет эту переменную?

4. Да, правильно. Если вы не хотите вызывать его каждый раз. Передает пустой массив. Если вы хотите вызвать, когда определенная переменная обновляется. Затем передайте эту переменную. он будет выполняться только для изменения этой переменной рендеринг в первый раз

5. В любое время 🙂 обновленный комментарий выше в основном, если пустой массив задается только при первом запуске