after using React Natives usestate function, includes method fails

Question

I'm trying to include a favorites mechanism to my react native codes, but I'm facing a problem:

When the page renders first, favs.includes function works as expected. But when I clicked the favorite button, it raises an error

TypeError: favs.includes is not a function. (In 'favs.includes(id)', 'favs.includes' is undefined)

const getFavs = async () => {
  await AsyncStorage.getItem("favs").then((res) => {
    if (res !== [] && res !== null && res !== "") {
      return setFavs(JSON.parse(res));
    } else {
      return setFavs([]);
    }
  });
};
useEffect(() => {
  getFavs();
  console.log(favs.includes(id));
  return console.log(typeof favs);
}, []);

return (
  <View style={{ alignItems: "center", justifyContent: "center" }}>
    {favs.includes(id) ? (
      <TouchableOpacity
        onPress={() => {
          AsyncStorage.removeItem("favs", id);
        }}
      >
        <Icon name="star" size={25} color="orange" solid />
      </TouchableOpacity>
    ) : (
      <TouchableOpacity
        style={{ height: 100, width: 100, backgroundColor: "red" }}
        onPress={() => {
          console.log(typeof favs);
          setFavs(favs.push(id));
          console.log(typeof favs);
          AsyncStorage.setItem("favs", JSON.stringify(favs));
          setFav(true);
        }}
      >
        <Icon name="star" size={25} color="orange" />
      </TouchableOpacity>
    )}
  </View>
);

pilchard · Accepted Answer · 2021-10-16T12:43:22.930

The problem lies in this line in your click handler

setFavs(favs.push(id))

which sets favs to a number not an array. Array#push() returns the new length of the array after push, not the array itself. see Why does Array.prototype.push return the new length instead of something more useful?.

Also, using push() on a state array mutates the array, you should instead

setFavs(prevFavs => [...prevFavs, id])
// or
setFavs(prevFavs => prevFavs.concat(id))

Your last error is assuming that calling console.log after your setState call will reflect the change in state when it will in fact log the old(current) state value. The updated state value won't be available until the next render cycle. see Why calling react setState method doesn't mutate the state immediately?

score -1 · Answer 2 · answered Oct 16 '21 at 12:31

I think it is usually because of when the component rendered at first, favs state is still empty or getFavs async function wasn't finished.

Maybe you can try to give condition to where favs.includes invoked such as:

           {favs && favs.includes && favs.includes(id)? // make sure favs is truthy and favs.includes property existed
            <TouchableOpacity onPress={()=>{
                AsyncStorage.removeItem('favs',id);
            }}>
            <Icon name = "star" size={25} color="orange" solid />
            </TouchableOpacity >
            :
            <TouchableOpacity
            style={{height:100,width:100,backgroundColor:'red'}} onPress={()=>{
                console.log(typeof(favs))
                setFavs(favs.push(id))
                console.log(typeof(favs))
                AsyncStorage.setItem('favs',JSON.stringify(favs))
                setFav(true)
            }}>
            <Icon name = "star" size={25} color="orange" />
            </TouchableOpacity >
            }

Please let me know if this solve your issue or not, thanks

Thanks for comment, it was not the reason. Pilchard's way did the trick. — alper yolcu, Oct 16 '21 at 16:05

Maksym Shcherban · Answer 3 · 2021-10-16T19:52:39.750

I see two problems with your code.

Firstly, I do not see your useState usage. It should be

const [favs, setFavs] = useState([]);

Secondly, you are mixing asynchronous and synchronous code. You are calling getFavs, which contains a call to asynchronous storage which is executed "outside" of main program thread. And immediately after that you are calling favs.includes(), which of course will not work, because the async call did not come through yet.

after using React Natives usestate function, includes method fails

3 Answers3