React Native Expo电影应用AsyncStorage异常及按钮状态问题求助

问题1：AsyncStorage数据无法持久化 #

原因 #

Poster组件的handleWatched方法中，调用setWatched后直接使用未更新的旧watched数组写入AsyncStorage，同时App组件已通过useEffect监听watched变化自动执行本地存储，两者冲突导致数据未正确持久化。

修复方案 #

删除Poster组件中手动操作AsyncStorage的代码，保留App组件中基于状态变化自动存储的逻辑即可。

修改后的Poster.tsx中handleWatched方法：

const handleWatched = () => {
  if (watched.some(item => item.imdbID === data.imdbID)) {
    setWatched(watched.filter(favourite => favourite.imdbID !== data.imdbID));
  } else {
    setWatched([data, ...watched]);
  }
};

问题2：Poster组件按钮状态异常 #

原因 #

使用watched.includes(data)判断影片是否已在列表中，这是引用比较。搜索结果返回的影片对象是新实例，即使imdbID和已看列表中的影片相同，引用不同也会返回false，导致按钮文本无法切换。

修复方案 #

改用imdbID（唯一标识）判断影片是否存在，替换所有watched.includes(data)为watched.some(item => item.imdbID === data.imdbID)。

修改后的Poster.tsx相关代码：

// 按钮标题判断
<Button
  title={watched.some(item => item.imdbID === data.imdbID) ? "Remove" : "Add"}
  onPress={() => handleWatched()}
></Button>

// handleWatched中的判断逻辑
const handleWatched = () => {
  if (watched.some(item => item.imdbID === data.imdbID)) {
    setWatched(watched.filter(favourite => favourite.imdbID !== data.imdbID));
  } else {
    setWatched([data, ...watched]);
  }
};

额外优化建议 #

• App组件中tvData的类型定义补全：const [tvData, setTVData] = useState<TVPROPS[]>([]);
• Poster组件的setWatched类型精确化：setWatched: React.Dispatch<React.SetStateAction<TVPROPS[]>>;

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