React Native 无限循环使用FocusEffect使用AsynStorage

vjrehmav 于 6个月前发布在 React

关注(0)|答案(1)|浏览(74)

我有一个组件，当路由器返回到这个组件时，它使用useFocusEffect钩子从AsyncStorage获取数据。

const [carNames, setCarNames] = useState([]);

useFocusEffect(() => {
  async function getCarNames() {
      const cars = await AsyncStorage.getAllKeys();
      setCarNames(cars);
  }
  getCarNames();
})

字符串
这导致了一个无限循环，函数getCarNames被一次又一次地调用。如果我注解掉setCarNames(cars)，无限循环就会停止，所以看起来每次组件被渲染时，这个钩子都会调用函数。如何避免这种情况？我以为这个钩子只在route被“聚焦”时调用函数。

react-native

来源：https://stackoverflow.com/questions/77422254/infinite-loop-in-usefocuseffect-using-asynstorage

1条答案

按热度按时间

f4t66c6m1#

我不确定Expo是否只是简单地从React Navigation重新导出钩子，或者他们是否推出了自己的版本，但这是使用React Navigation useFocusEffect时的预期行为。他们的文档指出，您需要将内部函数 Package 在useCallback中，否则它将在每次渲染时重新定义内部函数。尝试：

useFocusEffect(
  React.useCallback(() => {
    async function getCarNames() {
      const cars = await AsyncStorage.getAllKeys();
      setCarNames(cars);
    }
    getCarNames();
  }, [])
);

字符串
https://reactnavigation.org/docs/use-focus-effect/

赞(0）回复(0）举报 6个月前