react执行事件第一次输出一次count，后面都输出两次count？

Question

react执行事件第一次输出一次count，后面都输出两次count？

稀饭52

481315

发布于
2023-10-20 浙江

求教，为什么第一次触发输出一次count，后面都输出两次count，GPT回答说是因为第二次以后的点击，之前的setTimeout没销毁，所以一起执行，但如果是之前的没销毁，不应该是每次点击都会加一次console么，为什么固定都是两次

react javascript 前端

阅读 461

AI BotBETA

当然，这个问题与React的事件处理和setTimeout函数的异步性质有关。当你在React组件中设置一个setTimeout函数时，即使它的执行时间在后面，它也不会立即被销毁。当你在第一次点击后触发一个事件，然后设置一个setTimeout函数，这个函数会在指定的时间后执行。

当你在第一次点击后触发一个事件，会执行你设置的回调函数，然后设置一个setTimeout函数。在第二次点击后，这个setTimeout函数会执行，但同时也会触发你设置的回调函数。因此，你会看到两次console.log输出。

以下是一个可能的代码示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.timer = setTimeout(() => {
      console.log(`Timer executed: ${this.state.count}`);
    }, 1000);
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increase count</button>
      </div>
    );
  }
}

在这个示例中，每次点击都会增加状态count的值，并设置一个定时器在一秒后打印当前的状态值。当你点击按钮时，你会看到控制台输出两次值。第一次是点击的回调函数执行的，第二次是定时器执行的。

要解决这个问题，你需要在点击的回调函数中清除之前的定时器。你可以在每次设置新的定时器之前清除之前的定时器，或者在定时器的回调函数中检查状态的变化。这样可以确保只有一次定时器执行。

1 个回答

发布于
2023-10-20 北京

这是react的严格模式StrictMode渲染两次造成的现象，把<StrictMode>去掉就可以看到正常的输出情况。
https://codesandbox.io/s/inspiring-butterfly-wzgfx8?file=/src...这个是复现的地址

撰写回答