fetch関数内で変数が設定されない

Question

login.phpのテキストコンテンツを "var result"を介して画面に出力しようとしていますが、fetch関数は "var result"の値を変更しません。フェッチ関数の出力から結果の値を設定するにはどうすればよいですか？

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<{}> { 
 
\t render() { 
 
\t \t login(); 
 
\t \t return (
 
\t \t \t <View style={styles.container}> 
 
\t \t \t \t <Logo/> 
 
\t \t \t \t <Form/> 
 
\t \t \t \t <Text> 
 
\t \t \t \t \t {result} 
 
\t \t \t \t </Text> 
 
\t \t \t \t <Text> 
 
\t \t \t \t </Text></View> 
 
\t \t); 
 
\t } 
 
} 
 

 
function login() { 
 
\t \t result = fetch('https://www.skateandstrike.com/loginsv/login.php').then((text) => {return text;}); 
 
\t } 
 

 
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<{}> { 
 
\t constructor(){ 
 
\t \t super(); 
 
\t \t this.state = { 
 
\t \t \t data:'NoData', 
 
\t \t } 
 
\t } 
 

 
\t render() { 
 
\t \t login(); 
 
\t \t return (
 
\t \t \t <View style={styles.container}> 
 
\t \t \t \t <Logo/> 
 
\t \t \t \t <Form/> 
 
\t \t \t \t \t <Text> 
 
\t \t \t \t \t \t {this.state.data} 
 
\t \t \t \t \t </Text> 
 
\t \t \t </View> 
 
\t \t); 
 
\t } 
 
} 
 

 
function login() { 
 
\t \t fetch('https://www.skateandstrike.com/loginsv/login.php').then(data => this.setState(data)); 
 
\t } 
 

 
const styles = StyleSheet.create({ 
 
    container : { 
 
    backgroundColor:'#f05545', 
 
    flex: 1, 
 
    alignItems:'center', 
 
    justifyContent:'center', 
 
    } 
 
}); 
 

 

 
function myFunction() { 
 
    
 
this.setState({ showLoading: false }); 
 
}

私は間違った方法でSETSTATEを使用していますか？あなたの助けを前にありがとう。

Answer 1

あなたが状態を設定し、その後、必要に応じて、あなたがそれを解析し、idは約束を使用することをお勧め、

をフェッチAPIを使用して。

リアクションは状態/小道具の変更を再描画します。

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

はコンストラクタで状態を設定することを忘れないでください：これは101ところで

クイックヘルプを反応させています。