将componentDidMount（）值更改为注销

Question

我只是从本地反应开始。我正在关注有关如何登录和创建个人资料页面的教程。

它正在使用：

componentDidMount() {
    this._loadInitialState().then(value => {
      console.log(value);
      if (value !== null) {
        this.props.navigation.navigate("Profile");
      }
    });
  }

  _loadInitialState = async () => {
    const value = await AsyncStorage.getItem("user");

    return value;
  };

编辑* 个人资料

import React, { Component } from "react";
import {
  TouchableOpacity,
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList
} from "react-native";
import axios from "axios";
import { Dimensions } from "react-native";
import { whileStatement } from "@babel/types";

var width = Dimensions.get("window").width;

export default class Profile extends Component {
  state = {
    data: []
  };

  fetchData = async () => {
    const response = await fetch("http://192.168.1.16:3434/user");
    const users = await response.json();
    this.setState({ data: users });
  };

  componentDidMount() {
    this.fetchData();
    this._loadInitialState().then(value => {
      console.log(value);
      if (value == null) {
        this.props.navigation.navigate("Login");
      }
    });
  }

  _loadInitialState = async () => {
    const value = null;

    return value;
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <View
              style={{
                backgroundColor: "lightblue",
                padding: 10,
                margin: 10,
                width: width,
                alignItems: "center"
              }}
            >
              <Text style={{ color: "black", fontWeight: "bold" }}>
                Welcome {item.user_name}
                <TouchableOpacity style={styles.btn} onPress={this.logOut}>
                  <Text style={{ color: "white" }}>Log out</Text>
                </TouchableOpacity>
              </Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#2896d3",
    width: width
  },
  btn: {
    backgroundColor: "#e34f28",
    padding: 10,
    right: 10,
    position: "absolute",
    top: -0.5
  }
});

server.js

var express = require("express");
//var router = express.Router();
var app = express();
var mysql = require("mysql");
var bodyParser = require("body-parser");
var cors = require("cors");
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"
  );
  if ("OPTIONS" == req.method) {
    res.send(200);
  } else {
    next();
  }
});

app.use(bodyParser.json({ type: "application/json" }));
app.use(bodyParser.urlencoded({ extended: true }));

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "loginsystem"
});

var server = app.listen(3434, function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log("start");
});

con.connect(function(error) {
  if (error) console.log(error);
  else console.log("connected");
});

/* For login system */
app.post("/login", function(req, res, next) {
  var username = req.body.username;
  var password = req.body.password;

  con.query(
    "SELECT * FROM register_user WHERE user_name = ? AND user_password = ?",
    [username, password],
    function(err, row, field) {
      if (err) {
        console.log(err);
        res.send({ success: false, message: "Could not connect to db" });
      }
      if (row.length > 0) {
        res.send({ success: true, user: row[0].username });
      } else {
        res.send({ success: false, message: "User not found" });
      }
    }
  );
});

app.get("/user", function(req, res) {
  con.query("SELECT * FROM register_user", function(error, rows, fields) {
    if (error) console.log(error);
    else {
      console.log(rows);
      res.send(rows);
    }
  });
});

已添加EDIT LOGIN.JS

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  KeyboardAvoidingView,
  TouchableOpacity,
  AsyncStorage
} from "react-native";
import { createStackNavigator } from "react-navigation";

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
  }

  componentDidMount() {
    this._loadInitialState().then(value => {
      console.log(value);
      if (value !== null) {
        this.props.navigation.navigate("Profile");
      }
    });
  }

  _loadInitialState = async () => {
    const value = await AsyncStorage.getItem("user");

    return value;
  };

  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.wrapper}>
        <View style={styles.container}>
          <Text style={styles.header}>- LOGIN -</Text>

          <TextInput
            style={styles.TextInput}
            placeholder="Username"
            onChangeText={username => this.setState({ username })}
            underlineColorAndroid="transparent"
          />
          <TextInput
            style={styles.TextInput}
            placeholder="Password"
            onChangeText={password => this.setState({ password })}
            secureTextEntry={true}
            underlineColorAndroid="transparent"
          />
          <TouchableOpacity style={styles.btn} onPress={this.login}>
            <Text>Log in</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }

  login = () => {
    fetch("http://172.20.10.3:3434/login", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
    })
      .then(response => response.json())
      .then(res => {
        if (res.success === true) {
          alert("INSIDE");
          AsyncStorage.setItem("user", res.user);
          this.props.navigation.navigate("Profile");
        } else {
          alert(res.message);
        }
      })
      .catch(error => {
        console.log(error);
      });
  };
}

现在我一直在尝试在logOut（）函数中将值更改为null。但是我不知道如何。如何在logOut（）函数中将value属性设置为null？像：logOut(){ const value = null; return value;}

共有2个页面，分别是登录页面和个人资料页面。因此，我猜想需要在配置文件页面中执行logOut函数，以将登录页面的变量值调整为null？

感谢您的时间