变量不会在获取函数中设置

Question

我试图通过" var result"将login.php的文本内容打印到屏幕中，但是fetch函数不会改变" var result"的值。如何设置Fetch函数输出的结果值？

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
import loginapi from '../apis/loginapi';
var result='noresult';
export default class Login extends Component<{}>  {
	render() {
		login();
		return (
			<View style={styles.container}>
				<Logo/>
				<Form/>
				<Text>
					  {result}
				</Text>
				<Text>
				</Text></View>
		);
	}
}
function login() {
		result = fetch('https://www.skateandstrike.com/loginsv/login.php').then((text) => {return text;});
	}
const styles = StyleSheet.create({
  container : {
    backgroundColor:'#f05545',
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
  }
});
function myFunction() {
 
 this.setState({ showLoading: false });
}

使用SetState：

这也无法正常工作

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
import loginapi from '../apis/loginapi';
export default class Login extends Component<{}>  {
	constructor(){
		super();
		this.state = {
			data:'NoData',
		}
	}
	render() {
		login();
		return (
			<View style={styles.container}>
				<Logo/>
				<Form/>
					<Text>
					  	{this.state.data}
					</Text>
			</View>
		);
	}
}
function login() {
		fetch('https://www.skateandstrike.com/loginsv/login.php').then(data => this.setState(data));
	}
const styles = StyleSheet.create({
  container : {
    backgroundColor:'#f05545',
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
  }
});
function myFunction() {
 
 this.setState({ showLoading: false });
}

我是否以错误的方式使用SetState？预先感谢您的帮助。

Answer 1

使用fetch api时，我建议使用诺言，如果要设置状态，就可以对其进行解析。

在状态/道具上的反应重新租赁。

示例代码：

fetch(url)
.then(data => data.json()) // if needed
.then(data => this.setState(data))

记住在构造函数中设置状态。