reactjs - 在执行 axios post 请求时，如何修复与 typescript react 时未捕获的 promise 错误？

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>
    )
  }
}

在开发人员控制台中，我收到以下错误:

Failed to load resource: the server responded with a statusof 400 ()createError.js:16 Uncaught (in promise) Error: Request failed with status code 400at createError (createError.js:16)at settle (settle.js:17)at XMLHttpRequest.handleLoad (xhr.js:61)

我是 typescript / react 的新手，非常感谢任何见解/解决方案。

Answer 1

你可以像这样在 axios 中捕获错误:

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