[英]React MOBX Component Render
我刚刚切换this.setState以使用mobx observable,因为我有多个获取数据的GET请求。 这可以防止PieChart
被重新呈现每this.setState被调用时。
但是,现在子组件不会被重新渲染并保留在初始占位符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;
您需要确保您的Device
组件是observer
,如果您使用的MobX版本低于5,则必须在render方法中对数组进行slice()
或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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.