时间戳

首页 > 解决方案 > 未捕获（承诺中）TypeError：无法读取未定义的属性“错误”

reactjs - 未捕获（承诺中）TypeError：无法读取未定义的属性“错误”

问题描述

Register我在组件中收到以下错误handleSubmit：

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined.

您可以在组件下方找到我如何获取 API 数据以及 Next.js 配置。

注册.js

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

const Register = () => {

    const [info,setInfo] = useState({name:"",email:"",password:"",error:"",loading:false,message:"",showForm:true});

    const {name,email,password,error,loading,message,showForm} = info

    const handleSubmit = event => {
        event.preventDefault();
        // console.table({ name, email, password, error, loading, message, showForm });
        setInfo({ ...info, loading: true, error: false });
        const user = { name, email, password };

        signup(user).then(data => {
            if (data.error) {    
               `^^^^^^^^^^`
` Uncaught (in promise) TypeError: Cannot read property 'error' of undefined.`

                setInfo({ ...info, error: data.error, loading: false });
            } else {
                setInfo({...info,name: '',email: '',password: '',error: '',loading: false,message: data.message,showForm: false});
            }
        });
    };

    const handleChange= name =>(event)=>{
        setInfo({...info,error:false,[name]: event.target.value});
    }
    const registerForm=()=>{
    return (
        <form onSubmit={handleSubmit}>
        {/* Name */}
        <div className="form-group">
        {/* dynamic handle change by passing the value straight to it */}
            <input type="text" value={name} className="form-control" onChange={handleChange("name")} placeholder="Enter Your Name"/> 
        </div>
         {/* Email */}
         <div className="form-group">
            <input type="email" value={email} className="form-control" onChange={handleChange("email")} placeholder="Enter Your @Email address"/>
        </div>
        {/* Password */}
         <div className="form-group">
            <input type="password" value={password} className="form-control" onChange={handleChange("password")} placeholder="Enter Your password"/>
        </div>
        <button className="btn btn-info">Register</button>
        </form>
    )}
    return (
        <>
            {registerForm()}
        </>
    )
}

export default Register;

身份验证.js

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

export const signup = (user) => {
    return fetch(`${API}/signup`, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
    })
        .then(response => {
            return response.json();
        })
        .catch(err => console.log(err));
};

配置.js

import getConfig from "next/config";

const {publicRuntimeConfig} = getConfig();
export const API = publicRuntimeConfig.PRODUCTION ? publicRuntimeConfig.PRODUCTION_SITE : publicRuntimeConfig.DEVELOPMENT_SITE ;
export const APP_NAME = publicRuntimeConfig.APP_NAME;

next.config.js

module.exports = {
    publicRuntimeConfig:{
        APP_NAME: "----------",
        API:"http://localhost:4000/api",
        PRODUCTION:false,
        PRODUCTION_SITE:"https://---------.netlify.app",
        DEVELOPMENT_SITE:"http://localhost:3000",
    }
};

标签： reactjsnext.js

解决方案

解决了它：

next.config.js

module.exports = {
publicRuntimeConfig:{
    APP_NAME: "----------",
    API:"http://localhost:4000/api",
    PRODUCTION:false,
    PRODUCTION_SITE:"https://---------.netlify.app",
    DEVELOPMENT_SITE:"http://localhost:4000",
}
};

身份验证.js

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

  export const signup = (user) => {
     return fetch(`${API}/api/signup`, {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
   })
    .then(response => {
        return response.json();
    })
    .catch(error => console.log(error));
  };

推荐阅读