I'm working on a project where I am trying to fetch a list of restaurants from a database and display them on the screen.

When I run the code below I get this error:

TypeError: Cannot read properties of undefined (reading 'setRestaurants') at CustomerDashPage.js:39 at async fetchList (CustomerDashPage.js:39) at async getList (CustomerDashPage.js:32)

I know the fetch from the database works as I can console.log restaurants after I get them and all the tags from the database are the same as what is initially in the useState.

   
    const [restaurants, setRestaurants] = useState([
        {
            Restaurant_id: "R763567026",
            Restaurant_menuID: 0,
            Restaurant_name: "Boston Pizza",
            Restaurant_address: "271 Blackmarsh Rd",
            Restaurant_postal: "P1Z 7A5",
            Restaurant_username: "firstrest",
            Restaurant_orders: ["O415052628", "O321764897", "O252073901", "O724516036"],
            Restaurant_menuID: "M859068353",
            Restaurant_category: "Japanese",
            Restaurant_availability: true,
            Restaurant_openHour: "11h00",
            Restaurant_closeHour: "22h00",
        },
    ]);

    useEffect(() => {

        const getList = async () => {
            const fetchRest = await fetchList('R763567026');
        }
        getList();
    }, [])

    const fetchList = async (id) => {
        try {
            const resp = await fetch("/restaurant/id/"   id)
                .then((resp) => resp.json())
                .then(data => this.setRestaurants(data)).then(console.log(restaurants))
                .catch(err => console.log(err));
        }
        catch (err) {
            throw err;
            console.log(err);
        }
        return true;
    }

  //Controls what happens when a restaurant is selected.
    const selectRestaurant = async (id) => {
        console.log(id);
    };

    return (
        <div>
            <Header />
            <RestaurantList
                itemList={restaurants}
                component={RestaurantCard}
                onSelect={selectRestaurant}
            >
                {" "}
            </RestaurantList>
        </div>
    );
};

export default CustomerDash;

Any help would be much appreciated

CodePudding user response：

It's functional component so use setRestaurants instead of this.setRestaurants

const fetchList = async (id) => {
    try {
        const resp = await fetch("/restaurant/id/"   id)
            .then((resp) => resp.json())
            .then(data => 
            setRestaurants(data))
            .catch(err => console.log(err));
    }
    catch (err) {
        throw err;
        console.log(err);
    }
}

After updating state, you won't get state value instantly. so your console.log(restaurants) won't work.

CodePudding user response：

As Abu mentioned in his answer, you need to call setState, not this.setState. Also, since you are using async/await syntax, you don't need all of those .then() calls.

const fetchList = async (id) => {
  const response = await fetch(`/restaurant/id/${id}`).catch((err) => throw err);
  const json = await response.json();
  setRestaurants(json);
  console.log(restaurants);
  return true;
};