时间戳

首页 > 解决方案 > 状态更改时 useEffect 未运行

react-native - 状态更改时 useEffect 未运行

问题描述

我有一个屏幕（MyPics.js），显示用户从另一个屏幕选择的图像集合。我从异步存储中获取选定的图像。

如果我选择图像然后重新启动模拟器，一切正常。当我导航到 MyPics.js 屏幕时，我会看到以前选择的图像中存储在 AsyncStorage 中的所有图像。

  const MyPicsScreen = props => {
    const [picList, setpicList] = useState([]);

    useEffect(() => {
      console.log("I'm in!! picList data is: " +  picList);
      AsyncStorage.getItem("mypics").then((response) => {
      const currentData = JSON.parse(response);
      setpicList(currentData);
      console.log("Current picList data will be: " + currentData);
    });
   }, []);


  return (
<View style={styles.wrapper}>
  <ScrollView>
    <View style={{flexDirection: "column", justifyContent: "center", alignItems: "center"}}>

      {picList ? picList.map((item, index) => {
        return (
            <View key={index} style={styles.viewItem}>
              <Image style={{width: 200, height: 131}} source={Images[PicList[item][3]]} />
            </View>
          );
        }
      ) : <View><Text>You haven't selected any pics yet</Text></View>}

    </View>
  </ScrollView>
</View>
   );
 };

终端显示：

  I'm in!! picList data is:  //No data, as expected. Nothing is retrieved yet, then...
  Current picList data: pic001,pic007,pic099 // That shows, correctly, what's stored and screen shows those images

但是如果我添加图像，除非我重新启动模拟器，否则不会显示新图像。另外，控制台中没有读出，所以 useEffect 没有运行来获取数据和重置状态。

我假设返回 MyPics 屏幕会导致重新渲染，但我可能错了。

我在 MyPics.js 屏幕上制作了 3 个按钮，它们在 asyncstorage 上手动运行 removeItem 或 setItem 或 getItem，然后删除或设置或获取图像，然后更新 picList 状态。

这样可行。

当我使用按钮时，它会获取或删除以前设置的图像或设置新图像，并且屏幕会重新渲染以显示状态更改。

因此，当我导航到 MyPics.js 屏幕时，useEffect 没有运行。它仅在第一次渲染时运行。

当我添加 picList 状态作为依赖项时，

  }, [picList]);

它可以工作，但控制台正在无限循环中运行。

这正常吗？我应该忽略无限滚动的控制台还是错过了一步？我是否应该使用焦点侦听器在重新访问时重新呈现页面，因为当我返回 MyPics 屏幕时只需要新数据。

标签： react-nativereact-hooksasyncstorage

解决方案

在经历了很多痛苦和浪费时间之后，这行得通：

 useEffect(() => {
  AsyncStorage.getItem("mypics").then((response) => {
  setpicList(JSON.parse(response);
});
}, []);

const getList = useCallback(() => {
  AsyncStorage.getItem("mypics").then((value) =>{
  setpicList(JSON.parse(value));
});
}, [picList]);

可以在此线程中找到一些非常实用的功能组件示例：

React Navigation didfocus 事件监听器在类组件和功能组件之间的工作方式不同

返回屏幕时需要进行焦点检测，以便再次运行 useEffect 函数。

推荐阅读