I am a beginner to React and frontend development in general. Here is a "simple" code to d-CodePudding

import React, {useState, useEffect} from "react";
import {link} from "react-router-dom";
import "./Home.css";
import { toast } from "react-toastify";
import axios from "axios";

const Home = () => {
   const [data, setData] = React.useState([]);
   const loadData = async () => {
       const response = await axios.get("http://localhost:5000/api/get");
       setData(response.data);
   };   
useEffect(() => {
       loadData();
   },[]);
   return (
       <div style={{marginTop: "150px"}}>
           <table className="styled-table">
               <thead>
                   <tr>
                       <th style={{textAlign: "center"}}>NO.</th>
                       <th style={{textAlign: "center"}}>Name.</th>
                       <th style={{textAlign: "center"}}>Email.</th>
                       <th style={{textAlign: "center"}}>conatct.</th>
                       <th style={{textAlign: "center"}}>Action</th>
                   </tr>
               </thead> 
               <tbody>
                   {data.map((item, index) => {
                       return (
                           <tr key={item.id}>
                               <th scope="row"> {index 1}</th>
                               <td>{item.name}</td>
                               <td>{item.email}</td>
                               <td>{item.contact}</td>
                               <td>
                                   <link to={`/update/${item.id}`}>
                                   <buttom className="btn btn-edit">Edit</buttom>
                                   </link>
                                   <link>
                                       <button className="btn-btn-delete">Delete</button>
                                   </link>
                                 <link to={`/view/${item.id}`}>
                                   <buttom className="btn btn-view">view</buttom>
                                   </link>
                               </td>
                           </tr>
                       ) 
                   })} 
               </tbody>
           </table>
       </div>
   )
}

I am a beginner at React and front-end development in general. Here is a "simple" code to display a table, but it comes out blank please help me out and the warning I receive is React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

CodePudding user response：

where is data? I think that you define data. Like this:

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

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

const loadData = () => {
 const response = `your function for getting response from api`;
 setData(response.data);
}

CodePudding user response：

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

This bit of code makes your page go blank. UseEffect() requires a dependency when something inside results in a re-render of the page.

what you can do is either add the loadData() function inside the useEffect() and then call the function

useEffect(() => {
   const loadData = async () => {
       const response = await axios.get("http://localhost:5000/api/get");
       setData(response.data);
   };
   loadData();
}, [])

or you can use a useCallback() function

const loadData = useCallback(async () => {
   const response = await axios.get("http://localhost:5000/api/get")
   setData(response.data);
}, [data])

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

Please see the documentation for more information React Hooks FAQ