Question

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

2021-01-19

6886

reactjs typescript axios

这是我用于添加企业的 .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 status of 400 () createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 at 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 
    }
});