Node.js 使用fetch方法调用本地API

因此，我尝试使用fetch方法调用本地API，但问题是我不知道如何使用检索到的信息，我从internet复制了一些代码，但我认为这没有意义：/，有人能告诉我正确的使用方法吗？谢谢大家!

const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  
  fetch('http://192.168.1.228:5001/api/GetTrainers') 
  .then((response) => response.json())
  .then((responseJson) => {
    this.setData({ message : responseJson.message.data })
    })
  .catch((error) => {
    console.error(error);
   
  }); 

  function HomeScreen({ navigation }) {

    return (
<View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
         
          keyExtractor={({ Trainerid }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.Trainerid}</Text>
            )}
          />
        )}
           </View>
    );
  }

就是这样

function HomeScreen({ navigation }) {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const fetchData = React.useCallback(() => {
    fetch("http://192.168.1.228:5001/api/GetTrainers")
      .then((response) => response.json())
      .then((responseJson) => {
        setData(responseJson.message.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ Trainerid }, index) => id}
          renderItem={({ item }) => <Text>{item.Trainerid}</Text>}
        />
      )}
    </View>
  );
}

---

非常感谢你！！嘿，在说明问题仍然存在之后，我似乎没有从API调用中得到任何结果，这可能是什么问题？因此我尝试使用ngrok url更改我的url，结果出现以下错误：SyntaxError:JSON解析错误：意外标识符“ngrok”我找不到解决方案：/