Question

类型错误：无法读取未定义的属性“错误”

2021-01-29

1091

reactjs next.js

我已经定义了错误。但是，它给出了错误“TypeError：无法读取未定义的属性‘error’”

我在这里。我会很感激超越这一点的想法。

谢谢你的帮助。

错误截图

注册组件代码

import React , {useState} from 'react';
import { signup } from '../../../actions/auth';


const SignupComponent = () => {
    const [values, setValues] = useState({
        firstname: '',
        lastname: '',
        email: '',
        phonenumber: '',
        password: '',
        confirmpassword: '',
        howdidyouknowaboutus: '',
        error: '',
        loading: false,
        message: '',
        showForm: true

    });

    const {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus, error, loading, message, showForm} = values;

    const handleSubmit = e => {
        e.preventDefault();
        /* console.table({firstname, lastname, email, phonenumber, password, confirmpassword,howdidyouknowaboutus, 
            error, loading, message, showForm}); */
        setValues({...values, loading: true, error: false})
        const user = {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus}

        signup(user).then(data => {
            if (data.error) { ----------------------------------------------- The line with the error
                setValues({...values, error: data.error, loading: false});
            }else{
                setValues({
                    ...values, 
                    firstname: '', 
                    lastname: '', 
                    email: '', 
                    phonenumber: '', 
                    password: '', 
                    confirmpassword: '', 
                    howdidyouknowaboutus: '', 
                    error: '', 
                    loading: false, 
                    message: data.message,
                    showForm: false
                });
            }
        });
    };

   
};

export default SignupComponent;

谢谢

Answer 1

UPD

signup(user).then(data => {
     if (data) { // check here if data not undefined
        if (data.error) {
            setValues({...values, error: data.error, loading: false});
        }else{
            setValues({
                ...values, 
                firstname: '', 
                lastname: '', 
                email: '', 
                phonenumber: '', 
                password: '', 
                confirmpassword: '', 
                howdidyouknowaboutus: '', 
                error: '', 
                loading: false, 
                message: data.message,
                showForm: false
            });
        }
    } else {
         // probably here you would need to do something if dada is undefined
    }
});

上一条回复

将其更改为

if (data && data.error)

以确保数据已定义

Answer 2

首先使用 Console.log(data) 检查响应，然后可能截屏并发布注册服务，因为任何收到的数据都将来自服务本身的响应。确保您在注册服务中也捕获了错误。

更新

在您的 API 中，您可以使用类似以下内容捕获错误：

return res.status(400).json({
      errorMessage: "Username already taken",
    });
  }

然后在您的前端：

function internalServerError(err) {
  if (err.response && err.response.data && err.response.data.errorMessage) {
    return {
      status: false,
      errorMessage: err.response.data.errorMessage,
    };
  }
  return {
    status: false,
    errorMessage: "Internal server error. Please check your server",
  };
}

在您的 API 调用中，您可以使用类似以下内容捕获错误：


export function signup(credentials) {
  return // here your  call to the server
    .then(successStatus)
    .catch(internalServerError);
}

Answer 3

谢谢。这个有效。但是，后端的发布请求处于待处理状态，请检查网络捕获。控制台上没有错误。但是，待处理指向此代码

import fetch from 'isomorphic-fetch';
import {API} from '../config';

export const signup = (user) => {
    return fetch(`${API}/signup`, { ----- pending status pointing to this line 
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
    })

    .then(response => {
        return response.json()
    })
    .catch(err => console.log(err));
};