初始化加载各种图表的小部件组件时,它会正常工作,但是当切换到另一个 ListItem 时,切换到另一个项目时, componentDidMount 不会加载。我需要加载它,因为它会为其获取所需的数据。但问题是当我在 ListItem 之间切换时没有初始化 componentDidMount
DashboardSidebar.jsx
class DashboardSidebar extends Component {
constructor(props) {
super(props);
this.state = {
tabLocation: this.props.tabLocation
};
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.setState({
tabLocation: event.target.value
});
}
render() {
const { classes } = this.props;
const { path } = this.props.match;
const { reports = [], sites = [] } = this.props;
let fromFilterString = "-"
let toFilterString = "-"
return (
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}>
<div>
<List>
{reports.map((report) => (
<ListItem
onClick={this.onChange} button key={report.id}>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText
disableTypography
primary={
<Typography type="body2">
<Link to={`${path}/${report.slug}`} style={{ color: "#000" }}>
{report.name}
</Link>
</Typography>
}
/>
</ListItem>
))}
</List>
</div>
<Divider light />
</Drawer>
)
}
}
此组件似乎运行正确,但是当单击其他 ListItem
时,运行 componentDidUpdate
,它不会获取图表所需的数据。我还发现,当我将 MainDashboard 组件 key={i}
更改为 key={l.id}
时,开始点击 componentDidMount
,但是小部件没有加载,但从控制台我可以看到它命中了 componentDidMount
并获取了我 console.log()
的数据。
MainDashboard.jsx
class MainDashboard extends Component {
componentDidUpdate(prevProps) {
if (this.props.match.params.report === prevProps.match.params.report) {
return true;
}
let widgets = {};
let data = {};
let layout = {};
fetch(...)
.then(response => response.json())
.then(data => {
...
this.setState({dashboard: data, isLoading: false, layouts: layout });
})
}
componentDidMount() {
this.setState({ mounted: true, isLoading: true });
let widgets = {};
let data = {};
let layout = {};
fetch(...
})
.then(response => response.json())
.then(data => {
...
this.setState({dashboard: data, isLoading: false, layouts: layout });
})
}
sortWidgets(widgets) {
...
return widgets;
}
generateDOM() {
return _.map(this.state.dashboard.widgets, function(l, i) {
....
return (
<div key={i}>
<ChartWidget
visualization={l.visualization}
name={l.visualization.name}
</div>
);
}.bind(this));
}
render() {
return (
...
);
}
}
最佳答案
您有三个选择:
1-使用另一个生命周期,例如componentDidUpdate
,如果 props 或 state 有特定变化,则获取新数据
2- 使用新的Key
,如果在组件上使用新的key,会触发componentDidMount
,因为组件会再次渲染为新的实体
3- 使用react.ref
我认为您应该阅读所有三个选择,然后选择最适合您的一个。
关于javascript - React如何在ListItem之间每次切换时调用componentDidMount,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59888835/