Javascript 如何在react js的函数中重置interval并使用interval调用api

您好，我想在react js中调用我的函数时重置我的设置间隔iam在

componentDidmount

中调用我的间隔，我想在调用该函数时重置上一个间隔iam也更改同一函数中api的值，现在我想让它随更改而变化。该功能是所有三个按下的

键

下面是我的代码

import React, { Component } from "react";
import { HotKeys } from "react-hotkeys";
import Axios from "axios";

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      seconds: 3,
      color: null,
      items: [],
      currentItem: [],
      index: 0
    };
    this.handleChange = this.handleChange.bind(this);

    this.keyMap = {
      DONT_APPLIES: ["a", "A"],
      APPLIES: ["s", "S"],
      STRONGLY_APPLIES: ["d", "D"]
    };

    this.handlers = {
      DONT_APPLIES: e => {
        this.keyPressed();
      },
      APPLIES: e => {
        this.keyPressed1();
      },
      STRONGLY_APPLIES: e => {
        this.keyPressed2();
      }
    };
  }
  keyPressed(e) {
    const { index, items } = this.state;
    const nextQuestion = index + 1;
    this.setState({ currentItem: items[nextQuestion], index: nextQuestion });
    console.log(this.state);
  }
  keyPressed1(e) {
    const { index, items } = this.state;
    const nextQuestion = index + 1;
    this.setState({ currentItem: items[nextQuestion], index: nextQuestion });
    console.log(this.state);
  }
  keyPressed2(e) {
    const { index, items } = this.state;
    const nextQuestion = index + 1;
    this.setState({ currentItem: items[nextQuestion], index: nextQuestion });
    console.log(this.state);
  }
  handleChangeColor = newColor => {
    this.setState({
      color: newColor
    });
  };
  componentDidMount() {
    this.myInterval = setInterval(() => {
      const { seconds } = this.state;

      if (seconds > 0) {
        this.setState(({ seconds }) => ({
          seconds: seconds - 1
        }));
      } else if (seconds == 0) {
        return this.handleChangeColor("#840000");
      }
    }, 1000);
    Axios.get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        console.log(response);
        this.setState({
          items: response.data.result.items,
          currentItem: response.data.result.items[0],
          index: 0
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  componentWillUnmount() {
    clearInterval(this.myInterval);
  }

  render() {
    const { seconds } = this.state;
    const timebox = {
      width: "50px",
      height: "20px"
    };
    const { currentItem } = this.state;
    return (
      <HotKeys keyMap={this.keyMap} handlers={this.handlers}>
        <div id="wrapper" class="myleaty">
          <div class="myleaty-holder">
            <div class="container">
              <div style={{ background: this.state.color }} class="myleaty-box">
                <div style={timebox}>
                  <h2>{seconds}</h2>
                </div>
                <div class="logo">
                  <a href="#">
                    <img src="images/logo.png" alt="leaty" />
                  </a>
                </div>
                <p key={currentItem.id}>{currentItem.pqDetail}</p>
                <div class="btn-row">
                  <button className="btn btn1">Does not Applies</button>
                  <button className="btn">Applies</button>
                  <button className="btn btn1">Strongly Applies</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </HotKeys>
    );
  }
}

export default Test;

import React，{Component}来自“React”；
从“反应热键”导入{HotKeys}；
从“Axios”导入Axios；
类测试扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
秒：3，
颜色：空，
项目：[]，
当前项目：[]，
索引：0
};
this.handleChange=this.handleChange.bind（this）；
this.keyMap={
不适用：[“a”，“a”]，
适用：[“s”、“s”]，
强烈适用：[“d”，“d”]
};
此参数为0.1={
不适用：e=>{
这个。按键（）；
},
适用：e=>{
此键。按1（）；
},
强烈适用：e=>{
此键。按2（）；
}
};
}
按键（e）{
const{index，items}=this.state；
const nextQuestion=index+1；
this.setState（{currentItem:items[nextQuestion]，index:nextQuestion}）；
console.log（this.state）；
}
按键1（e）{
const{index，items}=this.state；
const nextQuestion=index+1；
this.setState（{currentItem:items[nextQuestion]，index:nextQuestion}）；
console.log（this.state）；
}
按键2（e）{
const{index，items}=this.state；
const nextQuestion=index+1；
this.setState（{currentItem:items[nextQuestion]，index:nextQuestion}）；
console.log（this.state）；
}
handleChangeColor=newColor=>{
这是我的国家({
颜色：新颜色
});
};
componentDidMount（）{
this.myInterval=setInterval（（）=>{
const{seconds}=this.state；
如果（秒>0）{
this.setState（（{seconds}）=>({
秒：秒-1
}));
}否则如果（秒==0）{
返回此.handleChangeColor（#840000”）；
}
}, 1000);
Axios.get（“https://jsonplaceholder.typicode.com/users")
。然后（响应=>{
控制台日志（响应）；
这是我的国家({
项目：response.data.result.items，
currentItem:response.data.result.items[0]，
索引：0
});
})
.catch（错误=>{
console.log（错误）；
});
}
组件将卸载（）{
clearInterval（this.myInterval）；
}
render（）{
const{seconds}=this.state；
常数时间框={
宽度：“50px”，
高度：“20px”
};
const{currentItem}=this.state；
返回(
{秒}
{currentItem.pqDetail}
不适用
应用
强烈适用
);
}
}
导出默认测试；

在您的代码中，

keyPressed

，

keyPressed1

和

keyPressed2

正在做同样的事情。只需先删除额外的两个函数。我能知道你想在哪个函数中清除间隔吗？我想在第一个函数中按下它```