reactjs - setState 没有被调用 onClick

Question

使用 material-ui v3.9.4、react-router v3。创建了一个左侧导航栏，其中包含一个包含链接项目的列表以重定向到另一个页面。由于某种原因，当我单击一个项目时，页面被重定向，但直到第二次单击以显示活动项目时状态才会更新。知道为什么会这样吗？代码如下。我已经控制台记录了 setState 更改，直到第二次单击才会打印。

class LeftNavigation extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            sidebarCollapsed: false,
        }
    }

    handleListItemClick = (event, index) => {
        console.log("CLICKED");                                             //prints first click
        this.setState({ selectedIndex: index }, () => {
            console.log("SELECTED INDEX:: ", this.state.selectedIndex)      //prints second click
        });
    }

    handleCollapse = () => {
        this.setState({ sidebarCollapsed: !this.state.sidebarCollapsed })
    }

    render() {
        const { classes } = this.props;

        return (
            <div className={this.state.sidebarCollapsed ? classes.rootCollapsed : classes.root}>
                <List component="nav">
                    <ListItem
                        button
                        component={props => <Link to="./pageOne" {...props} />}
                        selected={this.state.selectedIndex === 0}
                        onClick={(event) => this.handleListItemClick(event, 0)}
                    >
                        <ListItemIcon>
                            <CalendarIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page One" />
                    </ListItem>

                    <ListItem
                        button
                        onClick={(event) => this.handleListItemClick(event, 1)}
                        component={props => <Link to="./pageTwo" {...props} />}
                        selected={this.state.selectedIndex === 1}
                    >
                        <ListItemIcon>
                            <MailIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page Two" />
                    </ListItem>

                    <ListItem
                        button
                        component={props => <Link to="./pageThree" {...props} />}
                        selected={this.state.selectedIndex === 2}
                        onClick={(event) => this.handleListItemClick(event, 2)}
                    >
                        <ListItemIcon>
                            <NotesIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page Three" />
                    </ListItem>
                </List>

                <div
                    onClick={this.handleCollapse}>
                    {this.state.sidebarCollapsed ? <ChevronRight /> :
                        <div><ChevronLeft /><p>Collapse sidebar</p></div>}
                </div>
            </div>
        )
    }
}

export default withStyles(styles)(LeftNavigation );

标签： reactjsreact-routermaterial-ui