php 如何使用react native在屏幕上显示用户ID

mkshixfv  于 2022-12-21  发布在  PHP
关注(0)|答案(1)|浏览(118)

我使用PHP和React Native进行了登录,但现在我想显示登录用户的ID。用户登录时,ID应该显示在屏幕上。我尝试了几种方法,但我认为请求 prop 的方式是错误的。因为我想显示的页面从未请求上一页中启动的数据。
这是登录屏幕:

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import * as Expo from 'expo';

export default class App extends React.Component {
  state = {
    username: '',
    password: '',
    response: '',
    users_ID: '',
  };

  handleusers_usernameChange = (users_username) => {
    this.setState({ users_username });
  };

  handleusers_passwordChange = (users_password) => {
    this.setState({ users_password });
  };

  handleLoginPress = async () => {
    const { users_username, users_password } = this.state;

    try {
      let response = await fetch('http://IP/CodingApp/login.php', {
   
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          users_username,
          users_password,
        }),
      });

      let responseJson = await response.json();
      console.log(responseJson);
      if (responseJson.loggedin) {
        this.props.setLoggedIn(true, responseJson.users_ID);
        this.setState({ users_ID: responseJson.users_ID });
      } else {
        this.setState({ response: 'tekst kwam niet overeen' });
      }
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          value={this.state.users_username}
          onChangeText={this.handleusers_usernameChange}
          placeholder="users_username"
        />
        <TextInput
          style={styles.input}
          value={this.state.users_password}
          onChangeText={this.handleusers_passwordChange}
          placeholder="users_password"
          secureTextEntry
        />
        <Button title="Login" onPress={this.handleLoginPress} />
        <Text>{this.state.response}</Text>
      </View>
    );
  }
}

这是用户登录后出现的屏幕:

import React from 'react';
import { View, Text } from 'react-native';

const EditFamily = (props) => {
  return (
    <View>
      <Text>Your user ID is: {props.users_ID}</Text>
    </View>
  );
};

export default EditFamily;
lvmkulzt

lvmkulzt1#

阅读redux,这是一个状态管理工具,你可以随时随地保存id,并在任何地方使用它。
https://redux.js.org/introduction/getting-started

相关问题