取出不会从api

Question

import React, {useState} from 'react';
import { View, Text } from 'react-native';
import {getBackEndDomain} from "../utilities/utilities";

const Test = async () => {
    const [data, setData] = useState('');
            try {
            const domain = getBackEndDomain();
            console.log(domain); // This prints
            const response = await fetch(domain + '/api/test', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            console.log('test!'); // this does not print

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            setData(data);
            console.log(data);  // Example: Process the returned data
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    return (
        <View>
            <Text>{domain}</Text>
        </View>
    );
};

export default Test;

我的主要问题是获取失败，应用程序停止。 这是从Android模拟器，iOS模拟器以及通过Expo手机进行的。发布的代码是我尝试过的众多版本之一，但问题似乎在其他地方。请帮助我重新获得理智。 ：）

代码的问题是，您将组件函数声明为异步函数。反应功能组件应该是同步的，因为它们必须返回反应元素 - 不是承诺。取而代之的是，您应该在副作用钩中执行异步操作（例如，使用效率）。

const Test = () => {
  const [data, setData] = useState('');
  const domain = getBackEndDomain();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`${domain}/api/test`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });

        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [domain]);

  return (
   ...
  );
};