将 React Native 前端与 Node 后端连接起来答案

【问题标题】：Connect React Native front end with Node back end将 React Native 前端与 Node 后端连接起来
【发布时间】：2020-05-04 18:06:44
【问题描述】：

如果这是一个愚蠢的问题，请提前抱歉，但我在这里绕圈子。我对 react 和 node 很陌生，并希望将我的 react 原生前端与我的 node 后端连接起来。我读过的几乎每个教程都告诉我“在类声明之后和渲染方法之前粘贴 fetch api 代码”，但我的任何代码中都没有类声明或渲染方法，所以我是对将 fetch 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

再次感谢任何人能给我的任何帮助，因为这让我发疯了，我真的很想让它发挥作用！

【问题讨论】：

标签： android node.js react-native mobile

【解决方案1】：

使用函数式组件，您可以在函数中声明“方法”：

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

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

【讨论】：

哦！这个太有帮助了，谢谢！！我会试一试，然后回复你，希望我现在能弄清楚！

【解决方案2】：

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

Functional Components 发送 FetchAPI Request 我们使用 React Hooks useEffect 发送 api 请求，并将 API Request 的返回数据保存在另一个 hook 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

【讨论】：

非常感谢您的回答！我会阅读钩子，明天试试这个！
@Chilly 欢迎您 :)

【解决方案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 安装为项目的依赖项。

【讨论】：