javascript-React set-state在获取成功功能中不更新(在按键事件上)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-React set-state在获取成功功能中不更新(在按键事件上)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2251字，纯文字阅读大概需要4分钟。

内容图文

我有一个搜索组件,其中包含一个输入,在该输入上定义了一个按键事件处理程序函数,用于根据输入的字符串获取数据.如下所示：

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;

问题是我在第二个.then()中使用的setState.响应不会更新.我想更新它,并将其传递到此处导入的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.

我知道setState可以成功获取成功,问题出在console.log上,我不应该在setState之后使用它,而是在render()中使用console.log,发现状态可以正确更新.

我不小心的另一件事是InstantSearchResult构造函数！因此,当我重新渲染SearchBox组件时,InstantSearchResult每次都会渲染,但其构造函数只运行一次.如果我在InstantSearchResult中使用setState,那么我将面临一个无限循环,因此我必须使用this.props来将数据传递给第二个组件.

内容总结

以上是互联网集市为您收集整理的javascript-React set-state在获取成功功能中不更新(在按键事件上)全部内容，希望文章能够帮你解决javascript-React set-state在获取成功功能中不更新(在按键事件上)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---