我刚切换出this.setState来使用可观察的mobx,因为我有多个获取数据的GET请求。这样可以防止每次调用this.setState时都重新渲染PieChart
。
但是,现在子组件永远都不会被重新渲染,而是停留在初始占位符mobxState
中。当其数据来自API时,我该如何重新获得PieChart
子组件。
class Device extends React.Component {
mobxState = {
customOptions: [],
rowData: []
};
//mount data
componentDidMount() {
//call the data loader
this.fetchData();
}
fetchData = () => {
axios
.get("/custom_options.json")
.then(response => {
this.mobxState.customOptions = response.data.custom_options;
})
.then(
//data for PieChart, need this portion to render the PieChart
axios.get("/devices.json").then(response => {
this.mobxState.rowData = response;
})
);
};
render() {
return <PieChart data={this.mobxState.rowData} />;
}
}
decorate(Device, {
mobxState: observable
});
export default Device;
答案 0 :(得分:2)
您需要确保Device
组件是observer
,如果使用的MobX版本低于5,则必须slice()
or peek()
渲染方法中的数组。
import { observer } from "mobx-react";
class Device extends React.Component {
// ...
render() {
return <PieChart data={this.mobxState.rowData.slice()} />;
}
}
decorate(Device, {
mobxState: observable
});
export default observer(Device);