如何在 React 中实现 setTimeInterval？答案

【问题标题】：how to implement setTimeInterval in React?如何在 React 中实现 setTimeInterval？
【发布时间】：2021-02-15 19:05:26
【问题描述】：

我是 react 新手，我正在尝试编写一个 react 组件，组件有几个特性。 1.用户可以输入一个随机数字，然后数字也会显示在页面中。 2.实现一个带有文本值'start'的按钮，点击按钮后，显示的数值每隔一秒减一，文本值变为'stop'。 3.继续单击按钮，减一将停止，按钮的文本值将变回“开始”。 4.当数字减到0时会自动停止。

现在我在实现 setTimeInterval 的第二个功能。我已经实现了输入，但是当我单击开始时，显示的数字应该每 1 秒减 1。但随后发生错误。

当我单击按钮然后将文本值从“开始”更改为“停止”时，任何人都可以帮我实现吗？

TypeError: Cannot read property 'id' of undefined
(anonymous function)
src/App.js:40
  37 | <div>
  38 |   {this.state.details.map(detail => {
  39 |     return (
> 40 |       <div key={detail.id}>
     | ^  41 |         Number:{detail.number}
  42 |         <input
  43 |           type="number"

这是我的代码。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: [{ id: 1, number: "" }],
      type: "start"
    };
  }
  changeNumber = (e, target) => {
    this.setState({
      details: this.state.details.map(detail => {
        if (detail.id === target.id) {
          detail.number = e.target.value;
        }
        return detail;
      })
    });
  };

  handleClick = () => {
    this.timer = setInterval(
      () =>
        this.setState({
          details: this.state.details.map(detail => {
            detail.number = parseInt(detail.number) - 1;
          })
        }),
      1000
    );
  };

  render() {
    return (
      <div>
        {this.state.details.map(detail => {
          return (
            <div key={detail.id}>
              Number:{detail.number}
              <input
                type="number"
                onChange={e => this.changeNumber(e, detail)}
                value={detail.number}
              />
              <button onClick={() => this.handleClick()}>
                {this.state.type}
              </button>
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

【问题讨论】：

我自己解决了，谢谢大家

标签： javascript reactjs timer setinterval

【解决方案1】：

在 handleClick 函数中，您可能希望使用 prevState，因为您可以从 setState 调用中访问 prevState。

enter code herehandleClick = () => {
this.timer = setInterval(
  () =>
    this.setState(prevState => {
      details: prevState.details.map(detail => {
        console.log('detail', detail);
        detail.number = parseInt(detail.number) - 1;
      });
    }),
  1000
);};

现在，它应该像魅力一样发挥作用。

【讨论】：