React set-state не обновляется в функции успешного извлечения (при событии key up)

Question

У меня есть поиск component, содержащий ввод, для которого я определил key up event handler function для выборки данных на основе введенной строки. Как вы можете видеть ниже:

class SearchBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timeout: 0,
            query: "",
            response: "",
            error: ""
        }
        this.doneTypingSearch = this.doneTypingSearch.bind(this);
    }
    doneTypingSearch(evt){
        var query = evt.target.value; 
        if(this.state.timeout) clearTimeout(this.state.timeout);
        this.state.timeout = setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/todos/1/?name=query' , {
                method: "GET"
            })
            .then( response => response.json() )
            .then(function(json) {
                console.log(json,"successss") 
                //Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }  successss

                this.setState({
                    query: query,
                    response: json
                })
                console.log(this.state.query , "statesssAfter" )
            }.bind(this))
            .catch(function(error){
                this.setState({
                    error: error
                })
            });
        }, 1000);
    }
  render() {
    return (
        <div>
            <input type="text" onKeyUp={evt => this.doneTypingSearch(evt)} />        
            <InstantSearchResult data={this.state.response} /> 
        </div>
        );
    }
}
export default SearchBox;

Проблема в setState, который я использовал во втором .then(). Ответ не будет обновляться. Я хочу обновить его и передать его компоненту InstantSearchResult, который импортирован сюда. У вас есть идеи, где проблема?

Правка - Добавить компонент InstantSearchResult

class InstantSearchBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            magicData: ""
        }
    }
    // Both methods tried but got error =>  Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    componentDidUpdate(props) {
        this.setState({
            magicData: this.props.data
        })
    }
    shouldComponentUpdate(props) {
        this.setState({
            magicData: this.props.data
        })
    }
    render() {
        return (
            <h1>{ this.state.magicData}</h1>
        );
    }
}
export default InstantSearchBox;

Answer 1

Изменить:

Помните, что setState - это asynchronous, читая эту статью .

Я понимаю, что setState отлично работает в моем fetch success, проблема заключалась в console.log, который я не должен использовать после setState вместо того, чтобы console.log в render(), и я выяснил, что state обновляется правильно.

Другая вещь, к которой я не был осторожен, это InstantSearchResult Constructor! Когда я re-render, SearchBox компонент, следовательно, InstantSearchResult рендерится каждый раз, но constructor запускается только один раз. И если я использую setState в InstantSearchResult, я столкнусь с infinite loop, поэтому мне придется использовать this.props вместо того, чтобы передавать данные во второй компонент.

Answer 2

this было переопределено внутри функции обратного вызова обещания. Вы хотите сохранить его в переменной:

doneTypingSearch(evt){
        var _this = this,
            query = evt.target.value; 
        if(this.state.timeout) clearTimeout(this.state.timeout);
        this.state.timeout = setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/todos/1/?name=query' , {
                method: "GET"
            })
            .then( response => response.json() )
            .then(function(json) {
                console.log(json,"successss") 
                //Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }  successss

                _this.setState({
                    query: query,
                    response: json
                })
                console.log(_this.state.query , "statesssAfter" )
            }/*.bind(this)*/)
            .catch(function(error){
                _this.setState({
                    error: error
                })
            });
        }, 1000);
    }