React.js setState异步 [英] Reactjs setState asynchronous

问题描述

我正在构建一个小的搜索引擎，并遇到以下问题:

每次输入查询时，最后一个字母都会丢失.我发现，这与 setState 有关，并且不是异步 ...但是我无法针对我的情况提出解决方案.

她是我的职责:

  searchHandler = ({ target: { value } }) => {

  this.setState({ term: value });
    this.updateMessage(value);

    if(this.state.message.length === 0){
      this.setState({hasMoreItems: false})

      this.componentDidMount();
    }else{

  var requestUrl = 'https://questdb.herokuapp.com/all?q='
  fetch(requestUrl + this.state.message).then((response)=>{
      return response.json();
  }) .then((data)=>{
      this.setState({ tracks: data});

  })
}
}


updateMessage = message => this.setState({ message });

您对我有什么建议吗?

非常感谢！

解决方案

通常，您要使用setState()的第二个参数，该参数接受将以更新状态运行的回调函数.这是一个示例:

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends React.Component { 
  state = {
    value: '',
  }

  handleChange = (e) => {
    e.preventDefault();
    const { value } = e.target;
    this.setState({ value }, () => {
      console.log('Value is:', this.state.value );
    })
  }

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

render(<App />, document.getElementById('root'));

实时示例此处.

I am building a little search engine and got following problem:

Everytime I enter a query, the last letter is missing. I figured out, that it has something to do with setState and that it is not asynchronous... But I can not come up with a solution fo my case.

Her is my function:

  searchHandler = ({ target: { value } }) => {

  this.setState({ term: value });
    this.updateMessage(value);

    if(this.state.message.length === 0){
      this.setState({hasMoreItems: false})

      this.componentDidMount();
    }else{

  var requestUrl = 'https://questdb.herokuapp.com/all?q='
  fetch(requestUrl + this.state.message).then((response)=>{
      return response.json();
  }) .then((data)=>{
      this.setState({ tracks: data});

  })
}
}


updateMessage = message => this.setState({ message });

Do you have any suggestions for me?

Thanks a lot!

解决方案

In general, you want to use the second argument of setState(), which accepts a callback function which will run with the updated state. Here's an example:

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends React.Component { 
  state = {
    value: '',
  }

  handleChange = (e) => {
    e.preventDefault();
    const { value } = e.target;
    this.setState({ value }, () => {
      console.log('Value is:', this.state.value );
    })
  }

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

render(<App />, document.getElementById('root'));

Live example here.

这篇关于React.js setState异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！