分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在 API 调用中如果我单击提交按钮打开 200code 成功页面，否则在 ReactJS 中打开错误页面 404，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 API 调用中如果我单击提交按钮打开 200code 成功页面，否则在 ReactJS 中打开错误页面 404？

开发过程中遇到在 API 调用中如果我单击提交按钮打开 200code 成功页面，否则在 ReactJS 中打开错误页面 404的问题如何解决？下面主要结合日常开发的经验，给出你关于在 API 调用中如果我单击提交按钮打开 200code 成功页面，否则在 ReactJS 中打开错误页面 404的解决方法建议，希望对你解决在 API 调用中如果我单击提交按钮打开 200code 成功页面，否则在 ReactJS 中打开错误页面 404有所启发或帮助；

Please find the attached Image 嗨，我刚开始学习 ReactJs，如果我点击提交按钮打开“成功 200 代码页面”，我已经编写了使用最终用户链接创建一个 API 调用的完整代码，否则打开“404ERROR 页面”如何这样做可以请您解释以下代码中的任何人以供参考。

@H_502_3@import React,{ Component } from 'react';
class Regist extends Component {
    constructor(){
        super();
        this.state={
            firstname:"",lastname:"",password:"",email:"",show:false
        }
    }
    submit(){
       
        let url = "http://3.7.199.212:3000/API/v0/authentication/register";
        let data=this.state;
        fetch(url,{
         method:'POST',headers:{
             "Content-Type":"application/Json","Accept":"application/Json"
         },body:JsON.Stringify(data)
         }).then((result)=>{
            result.Json().then((res)=>{
                console.warn("res",res)
            })
         })
    }
    

    render(){
        return(
            <div>

                <input type = 'text' value= {this.state.firstnamE} name='firstname' placeholder="Firstname"
                 onChange={(data)=>{this.setState({firstname:data.target.value})}}/><br/>

                <input type = 'text' value= {this.state.lastnamE} name='lastname' placeholder="Lastname"
                onChange={(data)=>{this.setState({lastname:data.target.value})}}/><br/>
                
                <input type = 'text' value= {this.state.passworD} name='password' placeholder="password"
                onChange={(data)=>{this.setState({password:data.target.value})}}/><br/>

                <input type = 'text' value= {this.state.email} name='email' placeholder="Email"
                onChange={(data)=>{this.setState({email:data.target.value})}}/><br/>

                <button onClick={()=>{this.submit()}} >submit</button>
              
                
        </div>
        );
    }
}
export default Regist;

解决方法

首先，欢迎来到 React 世界:)

您应该在构造函数上绑定 submit 函数。在 constructor 函数中添加：

this.submit = this.submit.bind(this);

https://reactjs.org/docs/react-component.html#constructor

在那之后，

    submit(){
       
        let url = "http://3.7.199.212:3000/api/v0/authentication/register";
        let data=this.state;
        fetch(url,{
         method:'POST',headers:{
             "Content-Type":"application/json","Accept":"application/json"
         },body:JSON.Stringify(data)
         }).then((result)=>{
// If the request was success the code below will run
            result.json().then((res)=>{
                console.warn("res",res)
            })
         }).catch((error) => {
           // Otherwise this will run
           console.log(error)
            })
    }