javascript - React设置状态在获取成功功能中不更新(在按键事件发生时)

我有一个搜索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;

最佳答案

编辑:

请注意，setState是读取this article的asynchronous。

我知道setState在我的fetch success中可以正常工作，问题是console.log，我不应该在setState之后使用它，而是在console.log中使用render()，我发现state正确更新了。

我不小心的另一件事是InstantSearchResult Constructor!因此，当我对re-render进行SearchBox组件时，InstantSearchResult每次都会渲染一次，但是constructor仅运行一次。如果我在setState中使用InstantSearchResult，我将面对一个infinite loop，因此我必须使用this.props代替，将数据传递给第二个组件。