如何使用 React Native 调用抽屉项目中 returns 数字的函数？

Question

我想在 React Native 中显示 Drawer Item 中每个项目的数量。为此，我创建了一个函数，其中 returns 我想要的项目数。但它并没有给我我想要的。如何在抽屉项目标题中调用此功能？

函数：

const countItems = async () => {
  const storedArray = await  AsyncStorage.getItem('fav_data').then(favs => {
    const count = JSON.parse(favs).length;
    return count;
   
   
  })
  // console.log(storedArray)
  return storedArray;
   
}

在这里我想称呼它：

<DrawerItem title={'test ' + countItems()} accessoryLeft={HeartIcon}
      onPress={() => navigation.navigate('Favorites')}/>

Answer 1

您没有 awaiting countItems 的结果，因此它会在渲染时 return undefined。由于数字未存储在状态中，因此更改数字不会触发屏幕 re-render。

这是解决此问题的最常见方法的示例：使用状态和效果挂钩。

const [count, setCount] = useState();

useEffect(() => {
  AsyncStorage.getItem('fav_data').then(favs => {
    const count = JSON.parse(favs).length;
    setCount(count);   
  })
}, []);

...

<DrawerItem
  title={count ?? 'Loading'}
  accessoryLeft={HeartIcon}
  onPress={() => navigation.navigate('Favorites')}
/>

useEffect 挂钩有一个空的依赖数组（第二个参数），所以它只会运行一次，在组件的挂载上。

如果您想阅读更多关于状态和效果挂钩的信息，以下 React 文档的第 3 和第 4 部分有很好的解释：https://reactjs.org/docs/hooks-intro.html

如何使用 React Native 调用抽屉项目中 returns 数字的函数？

How to call a function which returns a number in Drawer item using React Native?

reactjs

react-native