javascript - 如何在 setState() 方法中构建方法

Question

我为 React 应用程序构建了这段代码。我希望，一旦我单击“AGGIUNGI JACK”按钮，该州就会在每个设定的时间间隔自动添加该数字。问题是当我单击按钮时，我收到此消息

“setState(...):采用要更新的状态变量对象或返回状态变量对象的函数。”

有没有办法将设置间隔方法嵌套在设置状态中？

import React, { Component } from "react";
import Square from "./components/square";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      jack: 777
    };

    this.tantajack = this.tantaJack.bind(this);
  }

  tantaJack = () => {
    this.setState(
      setInterval({ jack: (this.state.jack += 4323423) }, 100)
    );
  };

  render() {
    return (
      <div>
        <Square />
        <p onClick={this.mangiaJack}>{this.state.jack}</p>
        <button onClick={this.tantaJack}>AGGIUNGI JACK</button>
      </div>
    );
  }
}

export default App;

Answer 1

您可以更改顺序并执行 setInterval，该函数采用调用 setState 的函数:

tantaJack = () => {
  setInterval(() => {
    this.setState(previousState => {
      return { jack: previousState.jack + 4323423 };
    });
  }, 100);
};