useFocusEffect（）来自反应导航，未调用我的API

Question

我正在使用React Navigation 5.x，并使用其抽屉在我的应用程序中进行导航，我有一个添加产品的屏幕，其中在其中显示了类别，分支和提供者的列表，问题是，如果我的数据库是更新后，当我单击“ AddProduct”屏幕时，它没有反映最新的数据，因此我使用useFocusEffect（）来从数据库中接收更新，代码如下：

  useFocusEffect(
    React.useCallback(() => {
      setIsLoading(true);
      (async () => {
        const { status } = await Camera.requestPermissionsAsync();
        const { granted } = await MediaLibrary.requestPermissionsAsync();
        if(status && granted){
          setHasPermission(status === 'granted');
        }
        setCameraVisible(false);
        const userDetails = await getUserDetails('@user_details');
        setUserDetailsData({
          jwt: userDetails.jwt,
          secretKey: userDetails.secretKey,
          storeId: userDetails.storeId,
          emailAddress: userDetails.emailAddress
        })
        const categories = await readAllCategories(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
        setActiveCategories(categories.categories);
        const branches = await readAllBranches(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
        setActiveBranches(branches.branches);
        const providers = await readAllProviders(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
        setActiveProviders(providers.providers);
        setIsLoading(false);
      })();

      return () => {
      };
    }, [])
  );

所以，在我的状态下，我有一个“ activeCategories”，“ activeBranches”和“ activeProviders”数组，我用它们来做一个activeCategories.map（）以获得每个对象的Picker.Item，问题如下：] >

[当我在其屏幕上添加或删除分支，类别或提供程序时，我对API没问题，但是，当我回到我的“ AddProduct”屏幕时，选择器消失了，通常情况下，我添加了一个新的分支机构/提供者/类别，所以我必须转到主屏幕，然后返回AddProduct屏幕，然后在我用来显示我的一个选择器的代码下方显示选择器：

{activeBranches === undefined ? (null) : (
  <View style={{width: '90%', height: 40, borderColor: '#D6D6D6', borderStyle: 'solid', borderWidth: 1, borderRadius: 5, paddingLeft: 5}}>
    <Picker
      selectedValue={productInformation.branch}
      style={{height: 40}}
      onValueChange={(itemValue, itemIndex) => handleProductInformation({branch: itemValue})}
      itemTextStyle={{fontWeight: 'bold', fontSize: 20, marginLeft: 20}}
    >
      < Picker.Item color='#CFCFCF' label='Seleccionar Sucursal' value={0} key={0} />
      {activeBranches.map((item, index) => {
        return (< Picker.Item color={black} label={item.branchName} value={item.id} key={index} />);
      })}   
    </Picker> 
  </View>
)}

我正在使用React Navigation 5.x，并使用其抽屉在我的应用程序中进行导航，我有一个屏幕来添加产品，其中在类别，分支和提供者列表中显示了产品，问题是...] >

Answer 1

[好吧，不确定这是否是React Navigation 5.x的错误，但是我在起作用的代码下面将useFocusEffect替换为useEffect，并添加了事件侦听器：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', async () => {
    const categories = await readAllCategories(userData.jwt, userData.secretKey, userData.storeId);
    setActiveCategories(categories.categories);
    const branches = await readAllBranches(userData.jwt, userData.secretKey, userData.storeId);
    setActiveBranches(branches.branches);
    const providers = await readAllProviders(userData.jwt, userData.secretKey, userData.storeId);
    setActiveProviders(providers.providers);
    setIsLoading(false);
  });
  setIsLoading(true);
  setActiveCategories(true);
  (async () => {
    const { status } = await Camera.requestPermissionsAsync();
    const { granted } = await MediaLibrary.requestPermissionsAsync();
    if(status && granted){
      setHasPermission(status === 'granted');
    }
    setCameraVisible(false);
    const userDetails = await getUserDetails('@user_details');
    setUserDetailsData({
      jwt: userDetails.jwt,
      secretKey: userDetails.secretKey,
      storeId: userDetails.storeId,
      emailAddress: userDetails.emailAddress
    })
    const categories = await readAllCategories(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
    setActiveCategories(categories.categories);
    console.log(activeCategories);
    const branches = await readAllBranches(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
    setActiveBranches(branches.branches);
    console.log(activeBranches);
    const providers = await readAllProviders(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
    setActiveProviders(providers.providers);
    console.log(activeProviders);
    setIsLoading(false);
  })();
}, []);