0

im having a little issue trying to fetch and filter some data when a component mounts. Basically what I am trying to do is to fetch some random data and then filter it with a condition. but the filtering of the data is not working, there is most likely a part I misunderstood using useEffect. I made a code sample where I simplified and replicated the issue on https://codesandbox.io/s/green-night-rhg4lj?file=/src/App.js

When I press on the button I expect the filtered data to be console logged, but gives me only an empty array, Ive tried to add "filteredData" or "fetchedData" as a dependency of the useEffect, and yes, it does help me getting the filtered data right at the start but goes into an endless loop because of the behaviour of the useEffect dependencies with obj and arrays. Anyone knows of a way to get the data from API/Database and filter it right on the mount without going into a fetch loop?

Here is also the code written beside the codesandbox:

import axios from "axios";
import { useState, useEffect, useCallback } from "react";

export default function App() {
  const [fetchedData, setFetchedData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  const getData = useCallback(async () => {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    setFetchedData(data);
  }, []);

  useEffect(() => {
    getData();
    (async () => {
      await setFilteredData(fetchedData.filter((p) => p.title.length > 20));
    })();
  }, []);

  const clickHandler = () => {
    console.log(filteredData);
  };

  return (
    <div className="App">
      <button onClick={clickHandler}>Click</button>
    </div>
  );
}
MoonSungKil
  • 33
  • 5
  • Why it is going in endless loop? – sushildlh Jul 21 '22 at 19:48
  • It is going to endless loop since he is updating a state where the state itself is in the dependency which causes the function to run again, and since the data is not the same as the previous state, it cause rerender over and over again – amir Jul 21 '22 at 21:17
  • `getData(); (async () => { await setFilteredData(fetchedData.filter(…)); })();` doesn't make sense. Did you mean `(async () => { await getData(); setFilteredData(fetchedData.filter(…)); })();`? (Though even then, [`fetchedData` would be the original value](https://stackoverflow.com/q/54069253/1048572)) – Bergi Jul 21 '22 at 21:56

1 Answers1

0

You almost right!
You were right when putting the request in the useEffect hook.

...
    const getData = useCallback(async () => {
        const { data } = await axios.get("https://jsonplaceholder.typicode.com/posts");

        return data
    }, []);

    useEffect(async () => {
        const dataFromAPI = await getData();
        setFilteredData(dataFromAPI.filter((p) => p.title.length > 20));
    }, []);
...

Instead updating the state in the getData funtion just return it.
In the useEffect you get that data and the do what ever you want to do there.

note: According to this it's ok to use async in useEffect

amir
  • 196
  • 9