“登录”未定义错误发生在 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));
  }, []);
};