如何在反应中使用axios（post）

Posted 2023-03-11

【中文标题】如何在反应中使用axios（post）

【英文标题】：how to use axios (post) in react

【发布时间】：2019-01-04 09:17:29

【问题描述】：

在反应应用程序中，我想使用 axios/post 方法将输入字段值提交到数据库，因为我是反应新手，所以我没有任何明确的想法。 谁能帮我举个例子？提前致谢

我尝试了以下程序

import React,  Component  from 'react';
import axios from 'axios';

var panelStyle = 
    'max-width': '80%',
    margin: '0 auto'


class Register extends Component 
  constructor() 
   super();

    this.state = 
      formFields: username: ''
    
  

  render() 
    return(
     <div>
    <div class="panel panel-primary" style=panelStyle>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit=this.formHandler(this.state.formFields)>
          <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.username /> <br />
          <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="[e-mail]" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="[e-mail]" /> <br />
          <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" /> <br />
          <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" /> <br /><br />
          <button class="btn btn-primary">Register Account</button>
        </form>
      </div>
    </div>
  </div>

    );
  

  inputChangeHandler(e) 
   let formFields = ...this.state.formFields;
   formFields[e.target.name] = e.target.value;
   this.setState(
    formFields
   );
  

  formHandler(formFields) 
   axios.post('/api/register', formFields)
     .then(function(response)
       console.log(response);
       //Perform action based on response
   )
     .catch(function(error)
       console.log(error);
       //Perform action based on error
     );
  


export default Register

并在控制台中出现以下错误

index.js:2178 Warning: The tag <children> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

【问题讨论】：

这只是来自 React 的警告。

我仍然没有得到输出

你的代码有很多错误。尝试通过docs 阅读，也许在直接开始创建应用程序之前做一些教程。

对于 Axios 帖子，您可以阅读其 README.md 中的 example 部分。您可以在formHandler()

中发布您的 Ajax 帖子

【参考方案1】：

使用maxWidth 代替max-width。 使用onSubmit=(e) => this.formHandler(e, this.state.formFields) 而不是this.formHandler(this.state.formFields) 因为我们需要变量e 来防止表单请求html

使用

formHandler(e, formFields) 
        e.preventDefault();

改为inputChangeHandler(e)

import React,  Component  from 'react';
import axios from 'axios';

var panelStyle = 
    maxWidth: '80%',
    margin: '0 auto'

代码到这里就可以运行了。

class Register extends Component 
    constructor() 
        super();

        this.state = 
            formFields: username: ''
        
    

    render() 
        console.log(this.state)
        return(
            <div>
                <div className="panel panel-primary" style=panelStyle>
                    <div className="panel panel-heading">React Forum - Register</div>
                    <div className="panel panel-body">
                        <form onSubmit=(e) => this.formHandler(e, this.state.formFields)>
                            <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.username /> <br />
                            <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="[e-mail]" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.email/> <br />
                            <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="[e-mail]" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.confirmemail/> <br />
                            <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.password/> <br />
                            <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" onChange=(e) => this.inputChangeHandler.call(this, e) value=this.state.formFields.confirmpassword/> <br /><br />
                            <button className="btn btn-primary">Register Account</button>
                        </form>
                    </div>
                </div>
            </div>

        );
    

    inputChangeHandler(e) 
        let formFields = ...this.state.formFields;
        formFields[e.target.name] = e.target.value;
        this.setState(
            formFields
        );
    

    formHandler(e, formFields) 
        e.preventDefault();
        axios.post('/api/register', formFields)
            .then(function(response)


                console.log(response);
                //Perform action based on response
            )
            .catch(function(error)


                console.log(error);
                //Perform action based on error
            );
    


export default Register

【讨论】：

你没有回答这个问题，这是（据我了解）如何在 React 中使用 Axios。

将() => 作为属性传递不是一个好主意，因为它会触发不需要的渲染，最好使用命名函数。

你的方法很好。但通常我会使用redux 来发送请求。也许您可以使用redux-form 来更轻松地支持提交表单。

但是Redux下用什么发送请求呢？喜欢fetch？由于 Redux 没有提供开箱即用的 HTTP 请求方法。

添加到@ThanhNgo - 使用 redux-thunk ;)

【参考方案2】：

这就是我使用 create-react-app 设置它的方式。我喜欢使用async/await。 handleSubmit 和 handleChange 函数将随事件自动被调用，并且很容易从 handleSubmit 内部引用状态以获取要在发布请求中发送的数据。有时，别无选择，只能在 JSX 中使用回调风格的函数——比如(e) => this.whatever(e, this.state.whatever)，但如果可以避免，我想避免它。不相关，但您可以在渲染中从formFields 状态中提取用户名、电子邮件等，以节省大量输入 this.state 的麻烦。

   import React,  Component  from 'react'
   import axios from 'axios'

    class Register extends Component 

      state = 
        formFields:  user: '', email: '' 
        

      handleSubmit = async e => 
        e.preventDefault()
        const  formFields  = this.state
        try 
          let response = await axios.post('/api/register', formFields)
          // handle response
         catch (error) 
          // handle error
        

      

      handleChange = e => 
        const  formFields  = this.state
        formFields[e.target.name] = e.target.value
        this.setState( formFields )
      

      render() 
        const  username, email  = this.state.formFields
        return () 
          <div>
            <form onSubmit=this.handleSubmit>
               <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange=this.handleChange value=username /> <br />
               <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="[e-mail]" onChange=this.handleChange value=email/> <br />
            <button>Register Account</button>
            </form>
          </div>
        
      
    

export default Register