在执行 axios post 请求时，如何修复与 typescript 反应时未捕获的承诺错误？

Question

这是我.tsx添加企业的文件。

当我运行该程序时，我可以输入输入内容，但是当我点击提交按钮时什么也没有发生。

我的应用程序中有一个页面，其中有一个用于添加新企业的按钮。单击“添加企业”按钮后，将显示一个表单，其中包含名称输入字段和提交按钮。当用户填写表格后点击提交时，企业名称应该出现在企业表中。

export default class AddEnterprise extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const enterprise = {
      name: this.state.name
    };

    axios.post(`${process.env.PUBLIC_URL}/api/enterprises`, { enterprise })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
        <div>
    <form onSubmit={this.handleSubmit}>
      <label>
        Enterprise Name:
        <input type="text" name="name" onChange={this.handleChange} />
      </label>
      <button type="submit">Add</button>
    </form>
  </div>
    )
  }
}

在开发者控制台中，我收到以下错误：

无法加载资源：服务器响应状态为 400 () createError.js:16 Uncaught (in Promise) 错误：请求失败，状态代码 400 at createError (createError.js:16) at Settle (settle.js:17) ) 在 XMLHttpRequest.handleLoad (xhr.js:61)

我是打字稿/反应的新手，希望有任何见解/解决方案。

Answer 1

你可以像这样捕获 axios 中的错误：

axios({
    ...
}).then((response) => {
    ....
}).catch((error) => {
    if( error.response ){
        console.log(error.response.data); // => the response payload 
    }
});