javascript - 按下按钮后在 React 中进行 AJAX 调用？

Question

我对 React 还很陌生，但我试图在按下特定按钮时触发 AJAX 调用。我以这种方式使用 XMLHttpRequest 方法:

getAssessment() {
    const data = this.data //some request data here
    const url = this.url   // API URL
    const promiseObj = new Promise(function(resolve, reject) {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', url, true)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify(data))
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log('Request processed successfully')
            const resp = xhr.responseText
            const respJson = JSON.stringify(resp)
            resolve(respJson)
          } 
        }
      }
    }})
    return promiseObj
  }

在我的 base.tsx 文件中，我定义了一个简单的 React 组件类:

class DecisionBase extends React.Component<any, any> {
...
public render(){
        return(
            <div>
                <button
                   onClick = {//what can i put here?}
                >Submit</button>
            </div>
        )
}

在我读过的所有在线资源中，此 AJAX 调用都放置在 componentDidMount() 方法中。我也打算从API中提取数据，所以我不知道如何设计这方面。有人有什么建议吗？

Answer 1

很多时候，我们试图获取一些数据以在组件安装时显示，因此许多教程都旨在展示如何在 componentDidMount 中执行此操作。将数据整理函数分解为它们自己的实体是一个很好的做法。这允许第二种常见的数据获取类型，某些状态或属性发生更改并且需要重新获取，换句话说，在 componentDidUpdate 中。

听起来可能过于简单，但只需设置回调即可。

<button
  onClick={this.getAssessment}
>
  Submit
</button>

或者作为匿名函数

<button
  onClick={() => this.getAssessment()}
>
  Submit
</button>

看起来getAssessment实际上只是发出请求并返回 promise 的函数。您可以创建一个 onClickHandler 来调用 getAssessment 并等待其解析来更新状态，或者使用返回的 Promise 的 Promise 链。

onClickHandler = () => {
  this.getAssessment()
    .then(...) // <-- update state with response data
    .catch(...) // <-- or set some error state maybe?
}

然后用作回调

<button
  onClick={this.onClickHandler}
>
  Submit
</button>