React native：ActivityIndi​​cator 未按预期工作；它一直显示

Question

当我点击 Ionicon 时，我应该只看到 ActivityIndi​​cator，但它是白色的，但 ActivityIndi​​cator 永远不会停止工作。

它应该在getSamplesToChoose 函数完成其操作时停止。

函数 getSamplesToChoose

function getSamplesToChoose() {
    const fromDate = params.fromDate;
    const toDate = params.toDate;
    console.log('getSamplesToChoose for ws:', selectedWaterSource);
    if (selectedWaterSource.length === 0) {
      Toast.show({ text1: 'no choose points' });
      return;
    }
    (async () => {
      const wsRequestCount = await wsSampleRequestBySource(
        // check webservice
        selectedWaterSource,
        fromDate,
        toDate
      );
      if (wsRequestCount === 0) {
        //no requests from server
        Toast.show({
          text1: 'no drishot:' + fromDate + ' lebein:' + toDate,
          text2: selectedWaterSource + ' points: ',
        });
      }
      // updated db
      const requestList = await getRequestBySourceAndDates(
        selectedWaterSource,
        fromDate,
        toDate
      );
      if (requestList.length > 0) {
        // there are requests. move to next screen with list
        navigation.navigate('list of drishot', {
          paramsFromNekudotDigum: {
            requestList,
            fromDate: date1.toISOString().slice(0, 10),
            toDate: date2.toISOString().slice(0, 10),
          },
        });
      }
      toggleLoading(false);
    })();
  }

import {ActivityIndicator} from 'react-native';

export default function tomato() {
const [isLoading, toggleLoading] = useState(false);

return (
<TouchableOpacity
            activeOpacity={1}
            onPress={!isLoading ? () => {
              toggleLoading(true);
              getSamplesToChoose();
            } : null}
          >
            <View>
              <NavigationDialog />
            </View>
            {
              isLoading ?
                <View style={styles.indicator}>
                  <ActivityIndicator size="large" color="#4abdff" />
                </View>
                :
                <Ionicon
                  style={{ bottom: -10 }}
                  name="md-checkmark-circle-outline"
                  size={30}
                  color={
                    Array.isArray(selectedWaterSource) === true &&
                      selectedWaterSource.length > 0
                      ? 'white'
                      : 'gray'}
                />
            }
          </TouchableOpacity>
 );
}

Answer 1

好的，我认为你的函数有一些漏洞，这意味着它有可能可以运行并且无法到达关闭活动指示器的底部，因此请尝试以下代码：

function getSamplesToChoose() {
    const fromDate = params.fromDate;
    const toDate = params.toDate;
    console.log('getSamplesToChoose for ws:', selectedWaterSource);
    if (selectedWaterSource.length === 0) {
      Toast.show({ text1: 'no choose points' });
      toggleLoading(false)
      return;
    }
    (async () => {
      const wsRequestCount = await wsSampleRequestBySource(
        // check webservice
        selectedWaterSource,
        fromDate,
        toDate
      );
      if (wsRequestCount === 0) {
        //no requests from server
        Toast.show({
          text1: 'no drishot:' + fromDate + ' lebein:' + toDate,
          text2: selectedWaterSource + ' points: ',
        });
        toggleLoading(false)
      }
      //updated db
      const requestList = await getRequestBySourceAndDates(
        selectedWaterSource,
        fromDate,
        toDate
      );
      if (requestList.length > 0) {
        // there are requests. move to next screen with list 
        toggleLoading(false) //first turn off the Activity Indicator
        navigation.navigate('list of drishot', {
          paramsFromNekudotDigum: {
            requestList,
            fromDate: date1.toISOString().slice(0, 10),
            toDate: date2.toISOString().slice(0, 10),
          },
        });
      }
      toggleLoading(false);
    })();
  }