Question

我无法真正理解异步行为。我正在调用日语数据库，但由于异步行为，我的调用是用户输入的一步。例如，用户键入字母G将没有响应，直到用户键入Go。然后我的应用程序将发送一个查询字母G的请求，而用户除了Go的结果外。希望这有点意义。

这是我进行异步调用的地方。

sendData(){
        fetch('http://jisho.org/api/v1/search/words?keyword='+this.state.wordLookUp).then((dictionary) => {

                return dictionary.json();
            }).then((dictionary) => {
                console.log(dictionary);
                this.setState({
                    dictionary:dictionary.data,
                    loading:false
                })

            }).done((dictionary)=>{
                console.log(this.state.dictionary);


            });


    }

这里是我向用户显示结果的地方

renderList(){
     if(!this.state.wordLookUp.length){
        this.state.dictionary = null;
     }

     if(!this.state.dictionary){    
      return(
        <View>
        <Text>loading</Text>
        </View>
        )
     }else{

     return this.state.dictionary.map(words => 
            <ScrollView>
            <Text>{words.senses[0].english_definitions}  {words.japanese[0].reading}</Text>
             </ScrollView>

         );
     }
    }

我的渲染功能在这里：

render(){   
     return(
     <View>
     <Header/>
       <Fumi            
        label={'Add Englishword....'}
        iconClass={FontAwesomeIcon}
        iconName={'pencil'}
        iconColor={'#f95a25'}
        onSubmitEditing={(wordLookUp) => {

            this.sendData();    
        dismissKeyboard(); 
        }}
        onChangeText={(wordLookUp) =>{
            this.setState({wordLookUp});
            console.log(wordLookUp);
            this.sendData(); 
            this.renderList();
        }}

       />
     {this.renderList()}
     </View>
    )   

    }
}

这是启发我的设计的词典。 http://www.nihongodict.com/w/15758/ichiranhyou/

提前谢谢。

Answer 1

我建议等到用户完成输入想要搜索的字词。例如，将函数排队300ms的常用方法是，如果在300ms内再次调用此函数，则执行将再次延迟300ms。这样，如果用户输入的速度非常快，则不会为每个键击请求服务器，而是为最终结果请求服务器。

这是一个如何创建一个每X毫秒运行一次的函数的例子，如果对它所做的函数进行新的调用，那么它会取消先前的调用并为新的调用排队。

function createBuffered(callback, buffer) {
  var timerId;

  return function(...params) {
    if (timerId) {
      clearTimeout(timerId);
    }

    timerId = setTimeout(function(){
      callback.apply(this, params);
    }, buffer);
  };
}

首先你必须创建一个函数缓冲函数，然后在每次击键时调用它，它会自动延迟执行。这是一个如何使用它的例子。

class Testing extends Component {
  state = {
    query: '',
    fetch: '',
  };

  componentWillMount() {
      // This function will be buffered for 300ms
    this.fetchData = createBuffered((query) => {
      // You should make your fetch request here.
      this.setState({
         fetch: query,
      });
    }, 300);
  }

  load(query) {
    // This will be called constantly but nothing will happen until
    // 300ms without activity on the input field
    this.fetchData(query);
  }

  setQuery = (event) => {
    // Just updating the state to save the input
    const query = event.target.value;
    this.setState({
      query,
    });
    // Set the queue
    this.load(query);
  }

  render() {
    const { fetch, query } = this.state;

    return (
      <View>
        <Text>After 300ms, search for: {fetch}</Text>
        <TextInput value={query} onChange={this.setQuery} />
      </View>
    );
  }
}

祝你好运!!

编辑：这是reactjs中的一个运行示例，只有JSX它有点不同：https://jsfiddle.net/crysfel/fo7q6wzd/

React Native Fetch异步

1 个答案: