javascript - TypeError: Cannot read properties of undefined (reading 'data') console.log(data) isnt returning us

admin管理员组

文章数量:1410724

So basically I'm making a login function in React and I've made users using api I've stored the users in my MongoDB database and I'm getting no coding errors in my terminal I now have tried to login to one of the accounts and check the console on my browser and I keep getting back the error Cannot read properties of undefined (reading 'data').

Its saying that my console.log(data) isn't reading any properties and I'd appreciate some help on how i can fix this I'll paste down the code below to show what I've done

I need the console.log(data) to show the user which I log into information once I've logged in that should appear in the console but the error which I've trying to resolve isn't allowing it

import axios from 'axios';
import React, { useState } from 'react';
import { Col, Container, Row, Form, Button } from "react-bootstrap";
import './Login.css'


export const Login = () => {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);

    const submitHandler = async (e) => {
        e.preventDefault();

        try {
            const config = {
                headers: {
                    "Content-type": "application/json"
                },
            };

            setLoading(true)
            const { data } = await axios.post(
                "/api/users/login",
                {
                    email,
                    password,
                },
                config
            );


           //Here is the console.log which isnt returning the users info in my console
            console.log(data);
            localStorage.setItem('userInfo', JSON.stringify(data));
            setLoading(false);
        } catch (error) {
            setError(error.response.data);
        }
    };

    return (
        <Form onSubmit={submitHandler}>
            <Form.Group controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control
                    type="email"
                    value={email}
                    placeholder="Enter email"
                    onChange={(e) => setEmail(e.target.value)}
                />
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control
                    type="password"
                    value={password}
                    placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
};

export default Login;

So basically I'm making a login function in React and I've made users using api I've stored the users in my MongoDB database and I'm getting no coding errors in my terminal I now have tried to login to one of the accounts and check the console on my browser and I keep getting back the error Cannot read properties of undefined (reading 'data').

Its saying that my console.log(data) isn't reading any properties and I'd appreciate some help on how i can fix this I'll paste down the code below to show what I've done

I need the console.log(data) to show the user which I log into information once I've logged in that should appear in the console but the error which I've trying to resolve isn't allowing it

import axios from 'axios';
import React, { useState } from 'react';
import { Col, Container, Row, Form, Button } from "react-bootstrap";
import './Login.css'


export const Login = () => {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);

    const submitHandler = async (e) => {
        e.preventDefault();

        try {
            const config = {
                headers: {
                    "Content-type": "application/json"
                },
            };

            setLoading(true)
            const { data } = await axios.post(
                "/api/users/login",
                {
                    email,
                    password,
                },
                config
            );


           //Here is the console.log which isnt returning the users info in my console
            console.log(data);
            localStorage.setItem('userInfo', JSON.stringify(data));
            setLoading(false);
        } catch (error) {
            setError(error.response.data);
        }
    };

    return (
        <Form onSubmit={submitHandler}>
            <Form.Group controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control
                    type="email"
                    value={email}
                    placeholder="Enter email"
                    onChange={(e) => setEmail(e.target.value)}
                />
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control
                    type="password"
                    value={password}
                    placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
};

export default Login;

• javascript
• reactjs
• console.log

Share Improve this question Follow edited Mar 3, 2022 at 15:37 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Mar 3, 2022 at 12:04 kazkaz 35122 gold badges33 silver badges77 bronze badges 1

• "Its saying that my console.log(data) isn't reading any properties" no, it's saying it cannot read data of undefined. Therefore, the problem is when the code tries to read data of something that turns out to be undefined, not when it tries to use data. That would be const { data } = await axios.post() which means that the result of await axios.post() is undefined. – VLAZ Commented Mar 3, 2022 at 15:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

Try the following, without async/ await.

axios.post("api/users/login", { email, password, },config)
  .then(res=>res.data)
  .then(data=> {
    console.log(data);
    localStorage.setItem('userInfo', JSON.stringify(data));
    setLoading(false);
  })
  .catch(error => {
    setError(error)
  })

I had the same error, in my project I was using axios in an async function with await mand as below (bmUserApi is an api library which I coded myself over axios )

onLogin = async(formValues) => {

    this.setState({loading:true, error: ""});    

    try {

        var ls_response = await bmUserApi.login(formValues);

        this.setState({loading: false});

        const lv_token = ls_response.headers['x-auth-token'];
        Redux_Set_User(lv_token, this.props.redux_dispatch, this.props.history);   

when I was checking the error position on Google Chrome in "Call Stack" part, I've seen that my api library was trying add to authentication token to the api call header, by reading from localStorage of the browser.

I was doing it by using axios interceptors as below :

axiosClient.interceptors.request.use( 
    async function(config) {

        config.headers = {
            'Content-Type': 'application/json'
        }

        // token :

        var ls_user = JSON.parse(localStorage.getItem('user'));        

        const authToken = ls_user.token;

        if (authToken) 
            config.headers['x-auth-token'] = authToken;

        return config;
    },

    error => { Promise.reject(error) }
)

But this is login call .. so off course there is no stored data and token on the browser yet. So the "ls_user" variable in the above code was null .. this was causing the error. I just added control before that.

I hope this can be useful to your case.

本文标签：