Реагировать API получения useEffect

Всем привет, сегодня я покажу вам, как получить API в React JS, используя ‘useEffect’.

Хуки — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса.

Что делает useEffect?
Используя этот хук, вы сообщаете React, что ваш компонент должен что-то сделать после рендеринга. React запомнит переданную вами функцию (мы будем называть ее нашим «эффектом») и вызовет ее позже после выполнения обновлений DOM. В этом случае мы устанавливаем заголовок документа, но мы также можем выполнять выборку данных или вызывать какой-либо другой императивный API.

Запускается ли useEffect после каждого рендера? Да! По умолчанию он запускается как после первого рендера, так и после каждого обновления.

Давайте погрузимся в код сейчас-

Сначала мы импортируем необходимые модули

import React,{useState,useEffect} from 'react'
/*here we have imported the useState to change the state of the
 data when the data gets update on the end point and useEffect
 is used to fetch the data from the api 
and it will run on every render
*/

Здесь мы извлекаем данные из поддельного API под названием jsonPlacenholder API, который дает нам данные списка задач со статусом «ожидание» и «завершено».

const [todos, setTodos] = useState([]);
//useState is set to an empty arraya and later 
//we will fetch the data from the end point 
//and will store in the 'todos' array

использоватьЭффект -

useEffect(() => {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      setTodos(data)
      console.log(todos)
    })
 }, [todos]);

1. fetch используется для получения API из конечной точки
2. Затем мы устанавливаем состояние todo на данные, полученные из API.
3. В последней строке [todos] находится зависимость, от которой зависит useEffect.

Затем мы сопоставляем данные, используя функцию карты

{todos.map((todo) => (
             <div className="card bg-dark text-light my-3">
               <div className="card-body">
                 <h5 className="card-title">{todo.title}</h5>
                    <h6 className="card-subtitle mb-2 text-muted">
                      { todo.completed &&
                      <span>
                        Completed
                      </span>
                      }
                      { !todo.completed &&
                      <span>
                        Pending
                       </span>
                      }              
                   </h6>
              </div>
           </div>
          ))}

Полный исходный код -

import React,{useState,useEffect} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,NavbarToggler,Nav,NavItem,NavLink,Collapse} from 'reactstrap';
import './App.css'
function App() {
  const[toggle,setToggle] = useState(false);
  const isToggle = () => setToggle(!toggle);
  const [todos, setTodos] = useState([])
  useEffect(() => {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      setTodos(data)
      console.log(todos)
    })
    .catch(console.log)
    }, [todos])
  return (
    <div className="">    
    <h1 className="text-primary text-center display-4 mb-5">React fetch api using useEffect</h1>
      <div className="text-center" style={{display:"block",width:"50%",margin:"0 auto"}}>
        <div style={{display:"flex",flexDirection:"column",justifyContent:"center",justifyItems:"center",width:"100%"}}>
          {todos.map((todo) => (
             <div className="card bg-dark text-light my-3">
             <div className="card-body">
               <h5 className="card-title">{todo.title}</h5>
               <h6 className="card-subtitle mb-2 text-muted">
               { todo.completed &&
                 <span>
                 Completed
                 </span>
               }
               { !todo.completed &&
                 <span>
                   Pending
                 </span>
               }              
               </h6>
             </div>
           </div>
          ))}
        </div>
      </div>
    </div>
  )
}
export default App

Вот вывод-

Я новичок в разработке. Поэтому, если вы обнаружите какую-либо ошибку в каком-либо сообщении, пожалуйста, выделите ее
СПАСИБО ЗА ПРОЧТЕНИЕ ЭТОГО ПОСТА.

ПРИМЕЧАНИЕ. В примере у нас есть классы начальной загрузки, поэтому используйте bootstrap cdn или установите и импортируйте его с помощью диспетчера пакетов npm или пряжи.

Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку аплодисментов 👏, чтобы выразить свою поддержку автору 👇

🚀Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.