javascript - Onchange 事件被延迟调用，因为我快速删除了 react 中的输入

Question

我创建了这个简单的 lorem ipsum 生成器，它工作正常，但是当我在其中输入一个数字并快速删除该数字时，仍然显示一些输出，请注意，当我缓慢删除数字时，不会发生这种情况

生成器.js

    import React,{Component} from 'react';
import Output from './Output.js';

class Generator extends Component{

    state = {
        sentence: 0,
        para: 0,
        outputsentence:'',
        outputpara:'',
    }

    sentenceHandler = async (e) => {
        await this.setState({sentence: e.target.value});
        if(this.state.sentence === '0' || this.state.sentence === '')
        {
            this.setState({outputsentence:''});
        }
        else{
            try{

                let sentence = await fetch(`https://baconipsum.com/api/?type=all-meat&sentences=${this.state.sentence}&start-with-lorem=1`);            
                sentence = await sentence.json();

                this.setState({outputsentence:sentence});

            } catch(e)
            {
                console.log(e);
            }
        }

    }


    paraHandler = async (e) => {
            await this.setState({para: e.target.value});
            if(this.state.para === '0' || this.state.para === '')
            {
                this.setState({outputpara:''});
            }
            else{
            try{
                console.log(e.target.value);

                let paragraph = await fetch(`https://baconipsum.com/api/?type=all-meat&paras=${this.state.para}&start-with-lorem=1`);            
                paragraph = await paragraph.json();

                this.setState({outputpara:paragraph});

            } catch(e)
            {
                console.log(e);
            }
        }
    }




    render()
    {

        return(
            <div className='tc'>
                <h3>Number of sentences : </h3>
                <input type="number" onChange={this.sentenceHandler}/>
                <Output op={this.state.outputsentence} />
                <h3>Number of paras : </h3>
                <input type="number" onChange={this.paraHandler}/>
                <Output op={this.state.outputpara} />

            </div>
        )
    }
}

export default Generator;

输出.js

    import React from 'react';

const Output = ({op}) => {

    return(
        <div className='tc'>
            <p>
                {op}
            </p>     
        </div>
    )
}

export default Output;

它工作正常，但假设我输入数字 12 并使用退格键快速删除它，那么它仍然显示 1 行或第 1 行，如果我慢慢删除它第一个 2 然后 1 的一个字母，则不会发生这种情况。

查看它 https://wizardly-torvalds-092022.netlify.com/

Answer 1

你有竞争条件。由于异步获取/显示操作没有适当的取消机制，因此在您开始另一个操作(通过将输出更改为其他内容)后，没有任何东西可以阻止该操作完成。

可能有一些很好的库可以干净地处理这个问题，但以下是您可以手动执行此操作的方法。您需要“请求 ID”的概念，以便了解当前运行的操作是否是最新的请求，还是应该取消的操作。

class Generator extends Component {
  state = {
    sentence: 0,
    outputsentence: '',
    currentSentenceRequestId: null,

    para: 0,
    outputpara:'',
    currentParaRequestId: null,
  }

  sentenceHandler = async (e) => {
    var requestId = this.state.currentSentenceRequestId++;

    await this.setState({
      sentence: e.target.value,
      currentSentenceRequestId: requestId
    });

    if(this.state.sentence === '0' || this.state.sentence === '') {
      this.setState({ outputsentence: '' });
    } else{
      try {
        let sentence = await fetch(`https://baconipsum.com/api/?type=all-meat&sentences=${this.state.sentence}&start-with-lorem=1`);            
        sentence = await sentence.json();

        // Ignore if a newer request has come in
        if (this.state.currentSentenceRequestId !== requestId) {
          return;
        }

        this.setState({ 
          outputsentence: sentence
        });
      } catch(e) {
        console.log(e);
      } finally {
        this.setState({ 
          currentSentenceRequestId: null
        });
      }
    }
  }

  // ...
}