javascript - 使用 react 调用api的正确方法

Question

我有一个如下的 react 代码，它基本上创建了一个 TreeMap :

class ChartModal extends Component{
   constructor(props){
      super(props)
}
callApi(){

  fetch(someurl)
  .then((result) => {

    return result.json();
  }).then((jsonResult) => {
    console.log(jsonResult);
  })
}
render(){
  return(
    <Modal
            onOk={() => this.props.toggleVisibility()}
            onCancel={() => this.props.toggleVisibility()}
            visible={this.props.isVisible}
            okText={'ok'}
            cancelText={'cancel'}
            confirmLoading={false}
            title="Intent distribution chart"
        >
            <h1>HOWDY</h1>
            <TreeMap
                data =  {this.callApi()}//this is where i want the data returned by apicall
                width={400}
                valueUnit={'count'}
            />
        </Modal>
    )
  }
}

现在我想在 tree map 组件中使用 api 调用返回的数据，但我现在的做法似乎不起作用。当我运行它时，tree map 中的数据结果为空，尽管我希望 api 调用 返回的 json 在那里。

Answer 1

您需要在 componentWillMount 或任何其他生命周期 Hook 中调用 API，并在您的 API 回调中使用 setState 以确保将结果设置为组件状态变量.这样，在 setState 之后，您的组件可以访问 API 调用解析的值。

注意:this.state.result 在第一次渲染期间将为 null。确保在访问 this.props.data 之前在 TreeMap 组件中进行空检查。

IMP 注意事项

@aram90 关于对未安装的组件调用 setState 的好建议。为避免此 this.canSetState，我定义并添加了实例变量以防止对未安装的组件调用任何可能的 setState。

我使用这种方法只是为了尽可能早地调用 API，即使这意味着纳秒级。然而，另一种方法是调用 componentDidMount 中的 API，然后相应地检查 this._ismounted 实例变量。有关此结帐的更多信息，请在此处找到答案 Is there a way to check if the react component is unmounted? . React 文档建议不要使用 isMounted()。

有很多方法可以实现这一点，但这更像是 React 的一种方式。

class ChartModal extends Component{
  constructor(props){
    super(props)

    this.state = {
      result: null
    }
    this.canSetState = false;
  }

  componentWillMount() {
    this.canSetState = true;
    this.callApi();
  }

  componentWillUnmount() {
    this.canSetState = false;
  }

  callApi(){

    fetch(someurl)
    .then((result) => {

      return result.json();
    }).then((jsonResult) => {
      this.canSetState && this.setState({result: jsonResult})
    })
  }

  render(){
    return (
      <Modal
        onOk={() => this.props.toggleVisibility()}
        onCancel={() => this.props.toggleVisibility()}
        visible={this.props.isVisible}
        okText={'ok'}
        cancelText={'cancel'}
        confirmLoading={false}
        title="Intent distribution chart"
      >
        <h1>HOWDY</h1>
        <TreeMap
          data={this.state.result}
          width={400}
          valueUnit={'count'}
        />
      </Modal>
    )
  }
}