等到 `this.state` 设置为运行函数之前的时间段

Question

我有一个按钮，它有 3 个状态。根据触发的状态，它应该获取 post 此数据。

基本上，我希望它等到 this.state.favourite 值设置超过 200 毫秒。然后它应该触发提取。

它不应该 post 多次提取，

我尝试使用 _.debounce 的 lodash，但没有任何效果。它仍然运行立即执行此功能。

我也放在一个CodePen.

class Switch extends React.Component {
  constructor() {
    super();
    this.state = {
       favourite: 0
    }
  }

        handleClick() {
    this.setState((prevState) => ({
       favourite: (prevState.favourite + 1) % 3
    }));
    return _.debounce(this.favChosen(), 1000)
  }
  favChosen(){
    if (this.state.favourite === 0) {
    return this.testConsole1();
  } else if (this.state.favourite === 1) {
    return this.testConsole2();
  } else if (this.state.favourite === 2) {
    return this.testConsole3();
  }
 testConsole1() {
    console.log('This will be a fetch 1')
  }
  testConsole2() {
    console.log('This will be a fetch 2')
  }
  testConsole3() {
    console.log('This will be a fetch 3')
  }
  render () {
    const { favourite } = this.state;
    const fill = favourite === 0 ? "grey" :
                 favourite === 1 ? "green" : "red";
    return (
        <button className="favStar" onClick={this.handleClick.bind(this)} >
      <svg width="100" height="100">
        <g>
          <path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
        </g>
      </svg>
            </button>
    );
  }
}

React.render( <Switch />, document.getElementById( "page" ) );

Answer 1

您没有正确使用 debounce。

  constructor() {
    super();
    this.state = {
       favourite: 0
    }

    this.favChosen = _.debounce(this.favChosenRaw, 1000);     
  }

  handleClick() {
    this.setState((prevState) => ({
       favourite: (prevState.favourite + 1) % 3
    }));

    this.favChosen()

  }
  favChosenRaw(){....

工作fiddle：

http://codepen.io/anon/pen/GmELKo?editors=1010

Answer 2

触发状态更改操作的更好解决方案是在 setState 回调上调用函数，而不是在调用函数之前等待固定时间。你永远不知道改变状态需要多长时间，等待足够长的时间也会限制你的应用程序。试试这个

class Switch extends React.Component {
  constructor() {
    super();
    this.state = {
       favourite: 0
    }
  }

  handleClick() {
    this.setState((prevState) => ({
       favourite: (prevState.favourite + 1) % 3
    }), () => {this.favChosen()});

  }
  favChosen(){
    if (this.state.favourite === 0) {
    return this.testConsole1();
  } else if (this.state.favourite === 1) {
    return this.testConsole2();
  } else if (this.state.favourite === 2) {
    return this.testConsole3();
  }
 testConsole1() {
    console.log('This will be a fetch 1')
  }
  testConsole2() {
    console.log('This will be a fetch 2')
  }
  testConsole3() {
    console.log('This will be a fetch 3')
  }
  render () {
    const { favourite } = this.state;
    const fill = favourite === 0 ? "grey" :
                 favourite === 1 ? "green" : "red";
    return (
        <button className="favStar" onClick={this.handleClick.bind(this)} >
      <svg width="100" height="100">
        <g>
          <path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
        </g>
      </svg>
            </button>
    );
  }
}

React.render( <Switch />, document.getElementById( "page" ) );

CODEPEN

等到 `this.state` 设置为运行函数之前的时间段

Wait until `this.state` has been set for time period before running function

javascript

fetch

reactjs

等到 `this.state` 设置为 运行 函数之前的时间段

Wait until `this.state` has been set for time period before running function

javascript

fetch

reactjs

等到 `this.state` 设置为运行函数之前的时间段