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

问题描述 投票:0回答:1

如果这是个愚蠢的问题,我很抱歉,但我在这里兜圈子。我对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个回答
1
投票

在功能组件中,你在功能中声明你的 "方法"。

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

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

1
投票

所以,你试图使用功能组件而不是基于类的组件。

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

请在这里阅读更多关于React Hooks的内容。https:/reactjs.orgdocshooks-intro.html。

在你的上述方案中,带有功能组件的fetch 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

0
投票

一个最专业、最省事的方法是使用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作为依赖。

© www.soinside.com 2019 - 2024. All rights reserved.