时间戳

首页 > 解决方案 > 如何在 setState() 方法中构建一个方法

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

问题描述

我为 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;

标签： javascriptreactjsfunctionstate

解决方案

您可以更改顺序并执行一个setInterval调用函数的方法setState：

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

推荐阅读