javascript - 如何在反应js中的函数中重置间隔并使用间隔调用api

Question

您好，我想在调用我的函数时重置我的设置间隔 iam 在 react js 中调用我的间隔，componentDidmount并且我希望它在调用该函数时重置先前的间隔 iam 还更改同一函数中 api 的值，现在我想要它适应变化。该功能是所有三个keyPressed以下是我的代码。

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;

标签： javascriptreactjsfunctionaxiossetinterval