input onChange中setState问题 reactjs

Question

由于不想一直setState，想输入停止后再去 setstate，于是网上找了些方法，使用方法是用debounce

我参考下面代码，如果input里面加上value，不管我怎么输，为什么最后只能输出第一个字符出来？
比如我输入589632147,最后只能输出5

原链接

http://billqiu.github.io/2017/10/15/how-to-debounce-in-react/

//稍微改了下，input里面加了value

import react, { Component } from 'react';
import { debounce } from 'lodash.debounce';

export default class Debounce extends Component {
  construtor() {
    super();
    this.callAjax = debounce(this.callAjax, 300);
  }
  
  callAjax = (value) => {
    console.log('value :: ', value);
    this.setState({inputValue:value})
    // call ajax
  }
  printChange(e) {
    e.persist();
    this.callAjax(e.target.value);
  }
  render() {
    return (
      <div>
        <input onChange={this.printChange} value={this.state.inputValue} />
      </div>
    );
  }
}

Answer 1

import React, { Component } from 'react';

let timeout;
export default class Debounce extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
  }

  debounce = (fn, wait) => {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
    console.log(timeout);
  }

  handleChange = (e) => {
    const text = e.target.value;
    this.debounce(() => {
      this.setState({
        text
      })
    }, 1000);
  }

  render() {
    return (
      <div >
        <input onChange={this.handleChange}></input>
        <span>{this.state.text}</span>
      </div>)
  }
}

Answer 2

加了内容暂存stack以及旧值记录oldValue。你看下是不是这个效果。
不过我觉得没必要这样。。。

export default class Input extends Component {
    static defaultProps = {};

    state = {
        value: this.props.value
    };

    stack = [];
    oldValue = "";

    onChange = value => {
        const { onChange } = this.props;
        value = value.target.value;
        this.stack.push(value.slice(value.length - 1));
        setTimeout(() => {
            const newValue = this.oldValue + this.stack.join("");
            this.setState({ value: newValue });
            this.oldValue = newValue;
            this.stack = [];
        }, 1000);

        onChange && onChange(value);
    };
    componentDidMount() {
        if (this.props.select) {
            this.refs.input && this.refs.input.select();
        }
    }

    render() {
        const { value } = this.state;
        return <input {...this.props} ref="input" value={value} onChange={this.onChange} />;
    }
}

Answer 3

把setState的操作提取成方法用debounce包裹，在事件处理函数中调用该包裹后的方法