Reactjs 为什么在react中调用两次此事件处理函数并更新两次状态？ import React，{Component}来自“React” 类TestState扩展组件{ 建造师（道具）{ 超级（道具） 此.state={ 计数：1 } this.handleClick=this.handleClick.bind（this） } handleClick（）{ console.log（this.state） this.setState（状态=>{ 返回状态.count++ }) } render（）{ 返回 点击 {this.state.count} } } 导出默认测试状态

在上面的代码中，当我单击按钮时，每次单击该按钮计数器都会增加两倍的值。。e、 g.点击按钮后，计数将增加1、3、5、7？

---

但是state.count应该只增加一次，因为有++运算符。

您应该像这样更新状态

import React, { Component } from 'react'
 
class TestState extends Component{ 

    constructor(props){
        super(props)
        this.state = {
            count:1
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(){
        console.log(this.state)
        this.setState (state=>{
          return  state.count++
        })
    }
    render(){
        return <div>
            <button onClick={this.handleClick} >Click</button>
            {this.state.count}
        </div>
    }
}
export default TestState

---

由于返回的对象希望更新为非整数，因此第一个答案是解决方案，但生命周期方法可以通过另一种方式执行：

根据我的经验，ES6 fashion提供了一种更新状态的干法方法。使用匿名函数和隐式返回允许省略

return

关键字，即使在不依赖该值进行另一次计算时也不需要它们（由于#setState的异步性质，不建议使用）

handleClick（）{
console.log（this.state）
this.setState（state=>({
计数器：state.count+1
}))
}

像您在示例中所做的那样，直接改变状态可能会导致奇怪的行为，这是不可取的。以下是一段引用自：

永远不要直接改变this.state，因为之后调用setState（）可能会 替换你所做的变异。把这个国家当作 不变的

通过这样做

state.count++

可以抛出React进行循环，从而看到意外的结果

我会像这样重写你的代码：（）：

import React，{Component}来自“React”；
类TestState扩展组件{
建造师（道具）{
超级（道具）；
this.state={count:1}；
}
handleClick=count=>{
计数++；
this.setState（{count}）；
};
render（）{
const{count}=this.state；
返回(
this.handleClick（count）}>单击
{count}
);
}
}
导出默认测试状态；

因为您使用

state.count++对状态进行了变异，但它永远不应该用于反应。您的答案有助于我投票，但问题仍然存在，为什么状态要更新两次？您使用的是哪个版本的react？我使用的是react 16。对此我不是100%确定，但我认为每次状态更改时，视图都会再次渲染。在这种情况下，状态会发生两种变化，一种是当您使用
state.count++
时，另一种是当您调用set state时，调用是异步的，那么它们可能会首先递增，然后在调用后执行函数setState调用
state.count++
againca您能告诉我为什么状态会更新两次吗？@cognoxhr这可能是一个错误有两件事，首先，这可能是因为JS中的
后递增
值与
预递增
值之间存在微妙的关系，因此React可能会混淆，因为它将您的操作解读为“设置为原始值，然后添加1”。第二，这可能是由于原始代码中的语法，您编写它的方式是强制对“合并”
state.count++
作出反应，而不是内置函数所寻找的
{count:state.count++}
。第三，这可能是由于
setState
的异步性质。在幕后，React可以并且经常出于优化原因多次调用此函数，以确保其正确执行任务，因此，将其与不完整的语法结合起来可能会导致问题。最后，它可能总是由于您将当前组件绑定到的父组件。即使没有看到您的文件树，我也可以放心地假设您没有做任何类似的事情，因为您正在模拟计数效果。这回答了你的问题吗？
handleClick(){
    console.log(this.state)
    this.setState (state=>{
      return  { count: state.count + 1}
    })
}

import React, { Component } from "react";

class TestState extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
  }
  handleClick = count => {
    count++;
    this.setState({count});
  };
  render() {
    const { count } = this.state;
    return (
      <div>
        <button onClick={() => this.handleClick(count)}>Click</button>
        {count}
      </div>
    );
  }
}

export default TestState;