小编Ste*_*vie的帖子

我有一个呈现 MenuBar 组件的 App 组件。在该菜单栏中，我渲染 ListItems（来自material-ui）并将以下内容作为道具传递：

    onClick = (e) => {

    const id = e.target.id;
    console.log(id);
    console.log('called');
}

菜单栏组件：

    render() {
    const onClick = this.props.onClick;
    const titles = ["Home", "About", "Docket", "Polls", "News"];
    const listItems = titles.map(title =>
        <ListItem button id={title} onClick={onClick} key={title}>
            <ListItemText primary={title} />
        </ListItem>);
    return (
        <List
            component="ul"
            className="menu-bar">
            {listItems}
        </List>
    );
}

我想使用这个标题，我尝试从事件中检索它，以便我可以渲染 Home 组件或 About 组件等，具体取决于选择的 ListItem。但是，当我运行此命令并随机单击浏览器中的某些 ListItems 时，标题有时仅记录到控制台（看似随机）。我访问选定的 ListItem 的最佳方式是什么，或者为什么控制台有时只记录标题？

这是我在浏览器控制台中得到的内容：

案卷

被称为

被称为

民意调查

被称为

消息

被称为

拥有数据 df，执行以下操作：

fig=px.line(df, x='date', y='px', color='description') 

下图的渲染效果如所附图像。这是预期的行为吗？如何使点仅按时间顺序连接？