How do I ensure axios call sets the state in useEffect?

Question

I am trying to fetch some data using axios. I have this state of items:

const [subGroup, setSubGroup] = useState([])
const [items, setItems] = useContext(ItemsContext)

I am then using this items state, to filter some items, store them in another array state and then render them.

const getSubGroups = () => {
    console.log(items) // still empty array
    
        const [group] = items.filter(item => (
            item.name === match.params.group ? item.subgroups : null
        ))
        const subgroups = group.subgroups

        setSubGroup(subgroups)
    

}

useEffects(I only had the second one, but now I want to update the items' state on refresh, so this is the reason why there are two):

useEffect(async () => {
    await axios.get('http://localhost:3001/Items')
        .then(res => setItems(res.data));
    console.log(items)
    getSubGroups()
    }, [])
useEffect(() => {
    getSubGroups()
},[match.params.group])

The console log return an empty array and I get an error of 'Cannot read property 'subgroups' of undefined. I tried using the method without async and await keywords. Same result. How do I ensure useEffect gets the data and then to proceed with rendering items? Any help would be appreciated. Note: res.data returns the array that I need properly.

EDIT:

What about if I want to access even more nested data? I looked at your example, it happens to work in the case, but what if the case is this? I tried following the logic but I got no output:

const [items, setItems] = useContext(ItemsContext)
//each item has nested array data
const data = useMemo(() => {
    const [subWithData] = items.filter(item => (
        item.name === match.params.group ? item.subgroups : null
    )).filter(item => (
        item.subgroups.map(sub => (
            sub.name === match.params.subGroup
        ))
    ))
    return subWithData?.data?? []


}, [match.params.group, match.params.subGroup, items])

Where am I doing a mistake here? Sorry if the question is too lame but I am new.

https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — Nadia Chibrikova, Feb 14 '21 at 17:46
Well not really, too many suggestions, tried most of them. Only got confused. State still does not change when I need it to. — rollstapewz, Feb 14 '21 at 18:08
Write this : `useEffect(() => {console.log(items)}, [items]) ` and let us know what it prints. — Ajeet Shah, Feb 14 '21 at 19:01
I resolved the issue. I transfered the getSubGroups() function with filter/map chain in the jsx render return statement and it works as expected now. I just don't know if moving so much logic in the return statement is a good practice. — rollstapewz, Feb 14 '21 at 19:34

score 0 · Answer 1 · answered Feb 14 '21 at 20:11

Instead of moving your heavy (though, it is not heavy in your current case) computation in return statement, you can use useMemo hook to memoize the results and not re-compute if the source / dependency hasn't changed:

const [items, setItems] = useContext(ItemsContext)

const subGroups = useMemo(() => {
  const [group] = items.filter(item => (
    item.name === match.params.group
  ))
  return group?.subgroups ?? []
}, [match.params.group, items])

useEffect(() => {
  axios.get('http://localhost:3001/Items')
    .then((res) => setItems(res.data))
}, [])

return <>
  <div>{  ... you can use subGroups here  ... }</div>
</>

@rollstapewz I saw your edit. Why are you chaining your `filter` i.e. using it 2 times? You can do all the filtering in 1 filter. Technically it (what you wrote in edited part) should work. If it is not working, its reason might be the *data* and *filter* i.e. you applied wrong filters and hence it is returning `[]`. So, the best way to fix your issue would be that you create a sandbox to reproduce this issue. — Ajeet Shah, Feb 16 '21 at 17:45

How do I ensure axios call sets the state in useEffect?

1 Answers1