Question

我正在尝试使用ionic和数据库创建一个简单的登录系统。我使用一个简单的SQL查询来确保登录凭据有效，然后将用户引导到主仪表板页面。我试图用标题“欢迎”显示用户名。

我正在将Ionic与react.js一起使用。我也在使用电容器。每当我在便携式计算机上将其作为Web应用程序进行测试时，其工作原理就会像预期的那样并显示用户名。一旦我测试是否通过我的android设备，它就能正确登录我，但不显示用户名。我可能会缺少什么？

出于调试目的，我将其从名称更改为用户的ID号...仍然无法正确显示该数字...

网络应用-这是移动设备的外观，但并非如此

登录代码

import React, { useState, useEffect } from 'react';
import { Plugins } from '@capacitor/core';
import './Login.css';
import { Link, Redirect } from 'react-router-dom';
import axios from 'axios';

const { Storage } = Plugins;

const Login: React.FC = () => {
    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [isError, setIsError] = useState<boolean>(false);

    function handleLogin() {
        // // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   
        const baseURL = "https://freightsnap-proto.herokuapp.com";

        console.log("user: " + username);
        console.log("pass: " + password);

        let userInfo = {
            username: username,
            password: password
        }

        axios.post(baseURL + "/login", userInfo) .then(function(response) {
            if(response.data.length != 0) {
                setIsError(false);
                let userInfo = response.data[0];
                let data = JSON.stringify(userInfo);

                setUserData(data, userInfo.id);
            }
            else {
                console.log("err");
                setIsError(true);
            }
        });
    }

    async function setUserData(data: any, id: any){
        await Storage.set({
            key: 'user',
            value: data,
          });

          await Storage.set({
            key: '_id',
            value: id,
          });

          window.location.href = "/home"

        // getUserData();
    }

    async function getUserData() {
        // const { value } = await Storage.get({ key: 'user' });
        // console.log("getting...");
        // const user = console.log(value);

        // const ret = await Storage.get({ key: '_id' });
        // const user = JSON.parse(ret.value || '{}');

        // console.log(user);
      }

    return (
        <IonPage>
            <IonContent>
                <div className="bg-light">
                    <h1 className="header">[LOGO]</h1>
                    <div className="container">
                        <IonInput style={{ paddingTop: "30px" }} placeholder="Username" className="dark-txtbox" value={username} onIonChange={(e: any) => setUsername(e.target.value)} ></IonInput>
                        <IonInput placeholder="Password" type="password" className="dark-txtbox" value={password} onIonChange={(e: any) => setPassword(e.target.value)} ></IonInput>
                        <IonButton onClick={handleLogin} className="btn-mainBlue" shape="round" expand="full">Login</IonButton>
                        {
                            isError ? (
                                <p style={{color: "red"}}>Invalid Login!</p>
                            ) : (
                                <p></p>
                            )
                        }
                    </div>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default Login;

仪表板代码

import React, { useState, useEffect } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import { Plugins } from '@capacitor/core';
import './Home.css';
import axios from 'axios';

const { Storage } = Plugins;

const Home: React.FC = () => {
  const [userFullName, setUserFullName] = useState<string>('');

  useEffect(() => {
    getUserData();
    // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   

    // var url = window.location.href;
    // var splitUrl = url.split("/");
    // var userId = splitUrl[4]

    // console.log(userId);

    // axios.get(baseURL + `/findUser/${userId}`).then(response => {
    //   setUserFullName(response.data[0].user_name);

    //   console.log(userFullName);
    // })
  })

  async function getUserData() {
    const { value } = await Storage.get({ key: '_id' });

    // const baseURL = process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://freightsnap-proto.herokuapp.com"   
    const baseURL = "https://freightsnap-proto.herokuapp.com";
    console.log(value);

    setUserFullName(value || "");

    // axios.get(baseURL + `/findUser/${value}`).then(response => {
    //   setUserFullName(response.data[0].user_name);

    //   console.log(userFullName);
    // })
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Dashboard - Welcome {userFullName}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer />
      </IonContent>
    </IonPage>
  );
};

export default Home;

Answer 1

根据您的代码，我认为您在 Dashboard 代码中的异步函数 getUserData 仍在从您的服务器检索数据，因此数据尚无法显示。一个可能有效的建议更改是

<script>
    window.addEventListener('load', () => {
        var buttons= document.querySelectorAll('#first');
        for (var i = 0; i < buttons.length; i++)
            buttons[i].addEventListener("click", myFunction);
    });

    function myFunction(e) {
        siblings(e.target).forEach((element, index) => {
            element.setAttribute("style", "background-color: gold")
        });
    };

    function siblings(elem) {
        let siblings = [];
        if (!elem.parentNode)
            return siblings;
        let sibling = elem.parentNode.firstElementChild;
        do {
            if (sibling != elem)
                siblings.push(sibling);
        } while (sibling = sibling.nextElementSibling);
        return siblings;
    };

</script>

这将在该变量发生更改时更新 userFullName，并应使用用户名更新视图。

离子反应访问移动设备的本地存储

1 个答案: