使用react调用api的正确方法

Question

我有一个反应代码，如下所示，它基本上创建了一个树图：

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

现在，我希望api调用返回的数据在tree map组件中使用，但我现在这样做似乎不起作用。当我运行这个时，tree map中的数据显示为null，尽管我希望api call返回的json在那里。

Answer 1

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

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

IMP注释

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

我使用这种方法只是为了尽可能早地调用API，即使这意味着一纳秒。然而，另一种方法是在componentDidMount中调用API，然后相应地检查this._ismounted实例变量。关于这个检查的更多信息，答案在这里。有没有办法检查react组件是否已卸载？。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>
)
}
}

Answer 2

问题是callApi没有返回任何东西。如果它应该将数据分配到某个地方，那么它不是。如果真的返回了一些东西，那将是一个承诺，因为它是异步的。

您可以使用状态变量并将其映射到TreeMap的data道具。然后使用componentDidMount生命周期函数在组件渲染后获取数据。一旦它做出响应，就用结果更新映射的状态变量。理论上，它应该自动重新渲染TreeMap。