Question

如果这是一个愚蠢的问题，请先抱歉，但是我在这里转圈。我是React和Node的新手，希望将自己的React Native前端与Node后端连接起来。我阅读的每个教程几乎都告诉我“在类声明之后和render方法之前粘贴获取api代码”，但是我的任何代码中都没有类声明或render方法，所以我是关于将提取api代码放在哪里有点困惑？我不知道这是否有很大的不同，但是我的应用程序的每个屏幕都在其自己的文件中，因为它具有自己的功能，并且我正在使用堆栈导航器来在屏幕之间切换，同时它的功能也包含在堆栈导航器的另一个文件中。

如果有人能为我提供帮助，我将不胜感激，我对如何做感到困惑。

下面包括我的登录屏幕功能，因此您可以看到我说的屏幕设置为功能时的意思。所有其他屏幕的布局均相同。如果您需要查看其他内容，请告诉我，我将对其进行编辑和添加！

import React from 'react';

function LoginScreen() {
  return(
  <View style={{ alignItems: "center", marginTop: 24 }}>
  <Text style={styles.text}>
    Login Screen
  </Text>
  </View>
 );
}

export default LoginScreen

再次，我将很感谢任何人能给我的帮助，因为这使我痴呆了，我真的很想让这个工作正常！

Answer 1

使用功能组件，您可以在函数内部声明“方法”：

function LoginScreen() {
  const submit = () => {
    //do something 
  }

  return <View>
    <Button title="Submit" onPress={submit} />
  </View>
}

Answer 2

因此，您正在尝试使用功能组件而不是基于类的组件。

在发送FetchAPI请求的功能组件中，我们使用React Hooks，useEffect发送api请求，并将API Request的返回数据保存在另一个钩子useState中。

请在此处阅读有关React Hooks的更多信息， https://reactjs.org/docs/hooks-intro.html

在上述情况下，获取具有功能组件的api请求将是这样，

import React, {useEffect, useState} from 'react';

function LoginScreen() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('yourapi.com/user')
    .then(res => res.json())
    .then(data => setData(data));
  }, []);

  return(
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text style={styles.text}>
        // You Can Use Your Data Here {data}
        Login Screen
      </Text>
    </View>
 );
}

export default LoginScreen

Answer 3

使用axios库是最有利且最不繁琐的方法。检查此代码：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

import axios from 'axios';

export default function LoginScreen() {
  const [user, setUser] = useState({});

  const termToSearchFor = 'edilsonlm217';

  useEffect(() => {
    async function loadAPI() {
      const response = await axios.get(`https://api.github.com/users/${termToSearchFor}`);

      setUser(response.data);
    }

    loadAPI();
  }, []);

  return (
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text>
        {user.bio}
      </Text>
  </View>
  );
}

此代码段在加载组件后立即在公共github的API中搜索我的用户“ edilsonlm217”。它从response.data获取响应并将其设置为用户状态，然后在屏幕上打印我的简历。

使用它之前，请不要忘记将axios安装到您的项目中。

将React Native前端与Node后端连接

3 个答案: