关于计时器setState的值？

Question

import React, { Component } from "react";

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: props.number,
    };

    const timer = setInterval(() => {
      // this.setState({
      //   number: this.state.number - 1,
      // });

      this.setState((state) => ({
        number: state.number - 1,
      }));
      if (this.state.number === 0) {
        clearInterval(timer);
      }
    }, 1000);
  }

  render() {
    // # 这里最后输出的是什么？
    return <div>倒计时：{this.state.number}</div>;
  }
}

调用上面组件传值时如下，请问倒计时最后输出的数字为什么是-1而不是0？
完整代码如下调用上面的组件：

import React from "react";
import ReactDOM from "react-dom/client";

import Tick from "./Tick";
const root = ReactDOM.createRoot(document.getElementById("root"));

const btn = (
  <>
    <Tick number={10} />
  </>
);
root.render(btn);

Answer 1

这是React 18的特性, 可以参加这个https://reactjs.org/blog/2022...

简单来讲就是 在setInterval里面的setState也会合并在一起做更新, 所以这里的更新时异步的

// state.number = 1时
this.setState((state) => ({
number: state.number - 1,
}));
// 这里还是state.number === 1
if (this.state.number === 0) {
clearInterval(timer);
}

如果你想输出0的话, 就这样子

this.setState((state) => ({
number: state.number - 1,
}), () => {
    if (this.state.number === 0) {
clearInterval(timer);
});

或者不用createRoot 也行 (不过都上React18了, 这个就不建议了 )

Answer 2

测下来是0，你完整代码是什么