node.js - axios POST 请求不起作用

Question

我正在使用 Axios 向 Node.js 服务器发送 POST 请求，但它不起作用。您知道如何解决吗？

我的代码如下所示:

server.js:

app.post('/registration', (req, res) => {
  console.log(req.body);
});

我的类(class):

export default class Registration extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {}
  }
  handleSubmit (e) {
    e.preventDefault;
    axios.post('/registration', {name: document.getElementById('name') }).then(res => {
      console.log(res);
    })
    }
  render() {
    return (<form className="registrationForm">
      <input type="text" name="name" id="name" required="required" placeholder="name"/>
      <br/>
      {/*<input type="text" name="email" required="required" placeholder="email"/>
      <br/>
      <input type="number" name="phoneNumber" required="required" placeholder="phoneNo"/>
      <br/>
      <input type="password" name="password" required="required" placeholder="pass"/>
      <br/> */}
      <button className="registerButton" onClick={this.handleSubmit}>register</button>
    </form>)
  };
}

Answer 1

您的代码中存在各种问题

• preventDefault 是方法。你需要调用它
• 我怀疑您想将 DOM 元素发送到服务器
• 您想要使用 catch 处理网络故障

更正后的handleSubmit应如下所示

handleSubmit (e) {
    e.preventDefault(); // NB
    const data = {name: document.getElementById('name').value /* NB */ };

    axios.post('/registration', data).then(res => {
      console.log(res);
    }).catch(console.error) // now you could see what the actual problem is
  }

此外，通常不建议在 React 中使用 DOM 查找方法。您最好保留对输入的引用。

<input ... ref={input => this.name = input}/>
const data = {name: this.name.value };