React onclick函数产生增量状态，而不是对其进行更改

Question

我正在尝试实现在按钮单击事件上设置状态属性“ changedMarkup”的功能。

构造函数

  constructor() {
    super();
    this.state = {
      value: 0,
      changedMarkup: 0
    };
  }

Render

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

return (
  <Paper className={styles.root}>
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
      variant="fullWidth"
      indicatorColor="primary"
      textColor="primary"
      aria-label="icon label tabs example"
    >
      <Tab onClick={() => this.changeMarkup(0)} icon={<TrendingUpIcon />} label="TRENDING" />
      <Tab onClick={() => this.changeMarkup(1)} icon={<ScheduleIcon />} label="NEW" />
      <Tab onClick={() => this.changeMarkup(2)} icon={<WhatshotIcon />} label="HOT" />
    </Tabs>
  </Paper>
);

}

changeMarkup函数

changeMarkup = (markup) => {
    this.setState({
      changedMarkup: markup
    })
    console.log("markup", this.state.changedMarkup);
  }

预期的行为

单击第一个选项卡时的日志语句：标记0

单击第二个选项卡时的日志语句：标记1

单击第三个选项卡时的日志语句：标记2

结果行为

“ changeMarkup”属性产生意外值。我似乎找不到确切的通用模式，但是无论单击哪个标签，它似乎都从0递增到2，然后连续单击递减回到0。

感谢您的任何帮助。

我正在尝试实现在按钮单击事件上设置状态属性“ changedMarkup”的功能。构造函数builder（）{super（）; this.state = {value：0，...

Answer 1

参见：https://reactjs.org/docs/react-component.html#setstate

Answer 2

因为this.setState（{}）是异步操作，所以如果要更新值日志，则可以通过两种方式进行。