“登錄”未定義錯誤發生在 React.js

Question

我在 React.js 中制作了前端應用程序。 我在前端的 App.js 中編寫了代碼，例如

import React, { Fragment, useState, useEffect, Component, View } from 'react';
import axios from 'axios';
import Routes from '../src/components/Routes';
import TopNavigation from './components/topNavigation';
import SideNavigation from './components/sideNavigation';
import Footer from './components/Footer';
import './index.css';
import Router from './Router';

const App = () => {
  const [user, setLogin] = useState(null)
  const [report, setReport] = useState(null)
  useEffect(()=>{
  login().then(user => setLogin(user))
}, [])
  useEffect(()=>{
  getReport().then(report => setReport(report))
}, [])
return <div>
  {user != null? <p>name: {user.name}</p>:<button>Login</button>}
</div>
}

export default App;

我在這段代碼中寫了login().then(user => setLogin(user))無論用戶是否已經登錄。 登錄系統是在 Django 中制作的，所以我想使用它。我認為 React 有登錄方法，但我真的不明白哪里出了問題。我應該如何解決這個問題？

Answer 1

我看不到您的代碼中沒有定義login 。 如果你在其他文件上寫了login ，你應該導入它。

實際上，我無法理解你的意思——“我認為 React 有登錄方法，但是......”。 React 不支持任何預定義的登錄方法。

您應該像這樣自己定義登錄方法。

const API_URL = 'some url';
const login = async (body) => {
  const response = await axios.post(`${API_URL}/login`, body);
  return response.json();
};

const App = () => {
  const [user, setLogin] = useState(null);
  const [report, setReport] = useState(null);
  useEffect(() => {
    login({
      email: 'email@some.com',
      password: 'some password'
    }).then((user) => setLogin(user));
  }, []);
  useEffect(() => {
    getReport().then((report) => setReport(report));
  }, []);
};