如果这是个愚蠢的问题,我很抱歉,但我在这里兜圈子。我对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
再次,我将感谢任何人能给我的任何帮助,因为这是把我逼疯了,我真的很想把这个工作做起来
在功能组件中,你在功能中声明你的 "方法"。
function LoginScreen() {
const submit = () => {
//do something
}
return <View>
<Button title="Submit" onPress={submit} />
</View>
}
所以,你试图使用功能组件而不是基于类的组件。
在功能组件中,我们使用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
一个最专业、最省事的方法是使用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作为依赖。