Data Fetching with React using useEffect

Question

What I am trying to do is when the user click the edit button, this will send him to a new page where he can modify the info he already entered. The problem I am facing is that the new page is not showing the data previously entered, so that the user can make his changes. Also, the submit button to send those changes is not working. These are the errors I am getting: src\components\RestaurantList.jsx Line 25:8: React Hook useEffect has a missing dependency: 'setRestaurants'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 31:19: 'response' is assigned a value but never used no-unused-vars

src\components\UpdateRestaurant.jsx Line 9:12: 'restaurants' is assigned a value but never used no-unused-vars Line 38:8: React Hook useEffect has a missing dependency: 'code'. Either include it or remove the dependency array react-hooks/exhaustive-deps

My code for the component I am working on:

import React, {useState, useContext, useEffect} from 'react';
import { useHistory, useParams } from 'react-router-dom';
import RestaurantFinder from '../apis/RestaurantFinder';
import { RestaurantsContext } from '../context/RestaurantsContext';

const UpdateRestaurant = (props) => {

    const {code} = useParams();
    const {restaurants} = useContext(RestaurantsContext);
    let history = useHistory();

    const [name, setName] = useState("");
    const [value, setValue] = useState ("");
    const [strain, setStrain] = useState ("");
    const [weight, setWeight] = useState ("");
    const [authors, setAuthors] = useState ("");
    const [number, setNumber] = useState ("");
    const [page, setPage] = useState ("");
    const [date, setDate] = useState ("");

    useEffect(() => {
        const fetchData = async () => {
            const response = await RestaurantFinder.get(`/${code}`);
            console.log(response.data.data);
            setName(response.data.data.restaurant.name);
            setValue(response.data.data.restaurant.value);
            setStrain(response.data.data.restaurant.strain);
            setWeight(response.data.data.restaurant.weight);
            setAuthors(response.data.data.restaurant.authors);
            setNumber(response.data.data.restaurant.number);
            setPage(response.data.data.restaurant.page);
            setDate(response.data.data.restaurant.date);
            
           
        };

        fetchData();
    }, []);


    const handleSubmit = async(e) => {
        e.preventDefault();
        
        const updatedRestaurant = await RestaurantFinder.put(`/${code}`, {
            name,
            value,
            strain,
            weight,
            authors,
            number,
            page,
            date,  
            
        });
        console.log(updatedRestaurant);
        history.push("/");
        
    };


    return (
        <div>
            
            <form action="">

                <div className="form-group">
                    <label htmlFor="name">Name</label>
                    <input value={name} onChange={(e) => setName(e.target.value)} code="name" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Value">Value</label>
                    <input value={value} onChange={(e) => setValue(e.target.value)} code="value" className="form-control" type="float" />
                </div>

                <div className="form-group">
                    <label htmlFor="Strain">Strain</label>
                    <input value={strain} onChange={(e) => setStrain(e.target.value)} code="strain" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Weight">Weight</label>
                    <input value={weight} onChange={(e) => setWeight(e.target.value)} code="weight" className="form-control" type="float" />
                </div>

                <div className="form-group">
                    <label htmlFor="Author">Author</label>
                    <input value={authors} onChange={(e) => setAuthors(e.target.value)} code="authors" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Number">Number</label>
                    <input value={number} onChange={(e) => setNumber(e.target.value)} code="number" className="form-control" type="number" />
                </div>

                <div className="form-group">
                    <label htmlFor="Page">Page</label>
                    <input value={page} onChange={(e) => setPage(e.target.value)} code="page" className="form-control" type="number" />
                </div>

                <div className="form-group">
                    <label htmlFor="date">Date</label>
                    <input value={date} onChange={(e) => setDate(e.target.value)} code="date" className="form-control" type="number" />
                </div>

                <button onClick={handleSubmit} type="submit" className="btn btn-primary">Submit</button>

            </form> 
        </div>
    )
}

export default UpdateRestaurant

For the errors regarding dependencies, see this other question and its answer: stackoverflow.com/questions/55938884/… as well as the API documentation for useEffect: reactjs.org/docs/hooks-reference.html#useeffect — Phin Jensen
– Phin Jensen, Commented May 27, 2021 at 17:53
the things you mentioned above are not errors, just warnings and they can't cause any problems related to your issue . — SebMaz
– SebMaz, Commented May 27, 2021 at 18:07

Alexander Hemming · Accepted Answer · 2021-05-27 18:24:34Z

1

for reusable code, it may be best to just do something like this.

This is probably not the answer, but I hope it helps you find out the answer.

        const [data, setData ] = useState({restraunt.loaded:"false"});
    
             useEffect(() => {
    
  const fetch = async () => {
                        const response = await RestaurantFinder.get(`/${code}`);
                        console.log(response.data.data);
               setData({...response.data.data, restraunt.loaded:"true"});               
                    };
fetch();
            },[Data.restraunt.loaded])
        


           const {name, value , page, loaded } = Data.restaurant;

return (
        <div><h1>{loaded}</h1>
            </div>
)

If it shows loaded as false then you know it is because of the data not loading.

answered May 27, 2021 at 18:24

Alexander Hemming

8111 gold badge14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data Fetching with React using useEffect

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related