this.setState 不是函数

IT技术 javascript reactjs ecmascript-6
2021-03-16 10:04:52

我有以下组件,它维护在特定元素上触发事件时更新的状态,当状态更新时,它作为props传递给另一个组件。我目前正在尝试为什么我收到以下错误“this.setState 不是函数”,它很可能没有绑定到正确的上下文。但我不确定这一点,我这样做对吗?

export default class SearchBox extends Component{

    constructor(){
        super()
        console.log("search box imported");
        this.state = {
            results:[]
        };
    }

    //this.setState({result: arrayExample})

    searchGif(event) {
        if(event.keyCode == 13){
            let inputVal = this.refs.query.value;
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://api.giphy.com/v1/gifs/search?q='+inputVal+'&api_key=dc6zaTOxFJmzC', true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    // this.response = JSON.parse(xhr.responseText);
                    let returnedObj = JSON.parse(xhr.responseText);
                    //console.log(returnedObj.data);
                    let response = returnedObj.data.map(function(record){
                        let reformattedArray =  {   key: record.id,
                                                    id: record.id,
                                                    thumbnailUrl: record.images.fixed_height_small_still.url
                                                };
                                                return reformattedArray;
                    });
                    console.log(response);
                    this.setState({results: response});
                }
            }
            xhr.send();
        }
    }


    render(){

        return(
            <div>   
                <input className="search-input" ref="query" onKeyDown={this.searchGif.bind(this)} name="search" placeholder="Search"/>
                <GifSwatch data={this.state.results} />
            </div>
        );
    }
}

编辑: 我刚刚意识到当“onreadyStateChange”函数时上下文发生了变化,所以我在 searchGif 中做了以下操作

searchGif(){
   //other logic
   var self = this;
   xhr.onreadystatechange = function(){
    //ajax logic
    self.setState({results: repsonse});
   }
}
1个回答

您正在丢失 React 类this上下文。绑定它,也将它绑定到异步回调函数中。

constructor(props){
    super(props);
    console.log("search box imported");
    this.state = {
        results:[]
    };
    this.searchGif = this.searchGif.bind(this);
}

searchGif(event) {
    // ... code here
    xhr.onreadystatechange = () => {
    // ... code here
        this.setState();
    }
}

箭头函数很棒的一点是它们为你绑定了你的上下文,而且语法也很棒。缺点是浏览器支持。确保你有一个 polyfil 或一个编译过程来将它编译成 ES5 语法以实现跨浏览器性能。

如果您不能执行其中任何一个,那么只需在异步onreadystatechange函数之外创建您的 this 上下文的影子变量并使用它而不是this.


编辑

现在大多数编译器都使用箭头来处理类的绑定方法(不指定 babel 转换......等),你也可以在没有构造函数的情况下以这种方式分配状态

export default class SearchBox extends Component {
  state = { 
    results: []
  }
  
  searchGif = (event) => {
    // ... code here
    xhr.onreadystatechange = () => {
    // ... code here
        this.setState();
    }
  }
  render() {
    // ...
  }
}
如果你把它,不需要绑定它 searchGif =(event) =>{ }
2021-04-24 10:04:52
如果函数是从 say './helpers' 导入的,这个答案有什么不同?我无法将上下文绑定到导入的函数,这导致错误“this.setState 不是函数”
2021-05-04 10:04:52
@RajPowar 或者你可以只使用箭头函数来保留 this
2021-05-06 10:04:52
假设你在编译代码时有正确的 Babel 选项
2021-05-16 10:04:52
我给你一个迟来的投票,因为这确实帮助我将 React 组件转换为 ES6 语法。
2021-05-16 10:04:52