Question

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

构造函数

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

渲染

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

感谢您的帮助。

Answer 1

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

setState（）使更改进入组件状态，并告诉React该组件及其子级需要使用更新后的状态重新呈现。这是用于响应事件处理程序和服务器响应而更新用户界面的主要方法。

将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

setState是一个异步操作，在您进行控制台日志记录时尚不完整。您可以在更新后提供回调：

this.setState({changedMarkup: markup}, () => { 
  // Do your logging here!
});

Answer 2

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

  1. use callback function like this

this.setState({
    //set your state 
}, () => {
    console.log('your updated state value')
})


2. in render function like this

render(){
    console.log('your state')

    return()
}

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

2 个答案: