Question

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

'setState（...）：使用状态变量的对象进行更新或使用返回状态变量的对象的函数。'

是否可以将set interval方法嵌套在set状态中？

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);
};

如何在setState（）方法内部构建方法

1 个答案: