Блог

У меня есть этот экран, на котором я хочу видеть ActivityIndicator , пока все устройства не будут сопоставлены (не извлечены):

 const MyScreen = () => {
    const [devices, setDevices] = useState();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        getDevices();
    }, []);

    const getDevices = async () => {
        const pulledDevices = await fetchDevices();        
        setDevices(pulledDevices)
        setIsLoading(false)
    };

    if (isLoading)
        return (
            <ActivityIndicator />
        );
    return (
        <View >
            {devices?.map((device) => {
                return (
                    <View>
                        <Text>{device.name}</Text>
                    </View>
                );
            })}
        </View>
    );
};
 

Сопоставление этих устройств занимает некоторое время.

Как я мог бы реализовать здесь ActivityIndicator , пока все devices не будут сопоставлены.

Я предлагаю вам использовать немного более сложный асинхронный крюк ожидания, чтобы справиться с этим.

useAsyncHook.js

 const useAsync = asyncFunction => {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  const execute = useCallback(async () => {
    setLoading(true);
    setResult(null);
    setError(null);
    try {
      const response = await asyncFunction();
      setResult(response);
      setLoading(false);
    } catch (error) {
      setError(error);
      setLoading(false);
    }
  }, [asyncFunction]);


  useEffect(() => {
    execute();
  }, [execute]);

  return { loading, result, error };
};

 

Это необработанный асинхронный хук, который может быть улучшен многими способами, но он правильно обрабатывает состояние загрузки в этом состоянии.

Использование:

 const { loading, result, error } = useAsync(yourFunction);

if (loading) return null;
return <Component />;