React Native使用useState后favs.includes方法不存在报错问题求助

错误原因 #

• 核心错误点：你调用了setFavs(favs.push(id))，而JavaScript数组的push()方法返回值是新数组的长度（数字类型），不是修改后的数组。执行完这行后favs的类型就从数组变成了数字，自然就不存在includes方法，触发类型错误。
• 其他附带问题：
  • AsyncStorage.removeItem 只能删除整个key，不能直接删除数组内的单个元素，需要先拿到完整收藏数组过滤后再重新存
  • 你写的res !== []判断逻辑无效，AsyncStorage.getItem返回的是字符串类型，和空数组恒不相等
  • useEffect中调用getFavs是异步操作，调用后直接打印favs拿到的还是初始值，不是请求后的新值

修复后的代码 #

const getFavs = async () => {
  const res = await AsyncStorage.getItem("favs");
  // 正确判断空值，解析后赋值
  if (res) {
    try {
      const parsedFavs = JSON.parse(res);
      setFavs(Array.isArray(parsedFavs) ? parsedFavs : []);
    } catch (e) {
      setFavs([]);
    }
  } else {
    setFavs([]);
  }
};

useEffect(() => {
  getFavs();
}, []);

// 取消收藏处理函数
const handleRemoveFav = async () => {
  const newFavs = favs.filter(item => item !== id);
  setFavs(newFavs);
  await AsyncStorage.setItem("favs", JSON.stringify(newFavs));
  setFav(false);
};

// 添加收藏处理函数
const handleAddFav = async () => {
  // 用展开运算符生成新数组，不要直接修改原favs
  const newFavs = [...favs, id];
  setFavs(newFavs);
  await AsyncStorage.setItem("favs", JSON.stringify(newFavs));
  setFav(true);
};

return (
  <View style={{ alignItems: "center", justifyContent: "center" }}>
    {favs.includes(id) ? (
      <TouchableOpacity onPress={handleRemoveFav}>
        <Icon name="star" size={25} color="orange" solid />
      </TouchableOpacity>
    ) : (
      <TouchableOpacity
        style={{ height: 100, width: 100, backgroundColor: "red" }}
        onPress={handleAddFav}
      >
        <Icon name="star" size={25} color="orange" />
      </TouchableOpacity>
    )}
  </View>
);

关键修改说明 #

• 新增收藏/取消收藏的单独处理函数，逻辑更清晰
• 用数组展开语法[...favs, id]生成新数组来更新状态，避免修改原状态
• 修复了取消收藏的逻辑：先过滤掉要删除的id再重新存储，不用removeItem
• 优化了本地存储读取的容错逻辑，避免解析异常导致报错
• 移除了useEffect中多余的同步打印逻辑，避免拿到旧状态

内容的提问来源于stack exchange，提问作者alper yolcu