api - 来自反应导航的 useFocusEffect() 不总是调用我的 API

Question

我需要您的帮助以找到解决方法或解决此问题的方法。

我的数据库中有一些提供程序和类别名称，我需要收集它们以将它们显示在我的应用程序具有的 AddProduct 屏幕内的 Picker 中，但是大多数时候我只是打开应用程序并转到我的 AddProduct Screen 那些 Picker 组件不显示。为了修复它，我需要转到我的主屏幕（或我的任何其他屏幕），然后返回我的 AddProduct 屏幕，这样我的提供商和类别就会显示出来。我尝试使用 react navigation 5.x 中的 useFocusEffect() 来调用我的 API 并下载信息，我想也许使用 'focus' eventListener 我会解决这个问题，但它没有发生，所以我的代码是以下内容，我很确定我在那里没有任何错误，但也许你们已经尝试过同样的问题，可以帮助我修复它或找到解决方法。

在 useEffect 代码下方：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', async () => {
    const userDetails = await getUserDetails('@user_details');
    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);
  });
  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);
    const branches = await readAllBranches(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
    const providers = await readAllProviders(userDetails.jwt, userDetails.secretKey, userDetails.storeId);
    setActiveCategories(categories.categories);
    setActiveBranches(branches.branches);
    setActiveProviders(providers.providers);
    setIsLoading(false);
  })();
  return unsubscribe;
}, [navigation]);

在我必须呈现我的选择器的代码下方，我只为提供者添加了一个作为示例：

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

最后是从我的 API 获取数据的函数：

/*****     GET ALL PROVIDERS     *****/
export const readAllProviders = async (jwt, sweetSugar, storeId) =>{
  try {
    const response = await fetch('https://myurl.com/endPoints/getProviders.php',{
      method: 'POST',
      headers: new Headers({
        "Accept": "application/json",
        'Authorization': 'jwt ' + jwt,
        'Content-Type': 'application/x-www-form-urlencoded'
      }), 
      body: JSON.stringify({
        sweetSugar: sweetSugar, 
        storeId: storeId
      })
    });
    const json = await response.json();
    return json;
  }catch (error) {
    console.error(error);
  }
}

标签： apireact-nativereact-navigationreact-navigation-drawer