无法读取未定义的属性“setState”

IT技术 javascript reactjs webpack ecmascript-6 babeljs
2021-05-15 03:43:55 

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import videoDetails from './components/listvideos';

class YoutubeApp extends Component {
    constructor(props){
        super(props)

    this.state = {
          videos:[]
    };

    this.apiCall('surfing');
    
   
}
    apiCall(term){
        const params = {
            part: 'snippet',
            key:APP_KEY,
            q:term,
            type: 'video'
        };
    axios.get(APP_URL, { params: params})
        .then(function(response) {
           this.setState({
               videos:response
           })
        })
        .catch(function(error) {
        console.error(error);
      });
   }

    render(){
        
        return (
            <div>
            <videoDetails/>
            </div>
        )
    }


}


ReactDOM.render(
    <YoutubeApp/>,
    document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app">
</div>

嗨，我正在尝试制作一个用于练习的 youtube 克隆我是这方面的初学者，但我不明白为什么 react 上的状态给我带来了问题 我正在尝试将状态设置为我的视频数组，以便我可以将其传递给其他组件我没有包含 api 密钥或 url，但它的可读性很强，这是错误 {Cannot read property 'setState' of undefined}

4个回答

您function()在 Promise 链中使用，这将更改this. 如果您使用 ES6，我建议您使用箭头函数来维护类范围。例子：

你正在使用

axios.get(APP_URL, { params: params})
    .then(function(response) { // this resets the scope
       this.setState({
           videos:response
       })
    })

尝试使用箭头函数：

axios.get(APP_URL, { params: params})
    .then((response) => {
       this.setState({
           videos:response
       })
    })

您可能还需要在方法this.apiCall = this.apiCall.bind(this)之前添加。这会将范围绑定到react组件的范围。this.apiCall('surfing');constructorapiCall

更多信息：https : //facebook.github.io/react/docs/handling-events.html

此外，this.apiCall('surfing');从 中删除constructor并将其放入componentDidMount函数中，不应使用构造函数执行。

这是由于您的 API 调用中的作用域。的值在您的Promise链中的回调中this是不同的response。有两种方法可以解决这个问题。

您可以this在apiCall方法的开头设置一个变量引用。

apiCall(term){

    const that = this;

    const params = {
        part: 'snippet',
        key:APP_KEY,
        q:term,
        type: 'video'
    };

   axios.get(APP_URL, { params: params}).then(function(response) {
       that.setState({
           videos:response
       });
    }).catch(function(error) {
       console.error(error);
  });

}

或者你可以使用 ES6 箭头函数，它保持原始范围，如下所示： 

axios.get(APP_URL, { params: params}).then(response => {
    this.setState({
         videos:response
    });
})

您可以将当前上下文分配给this变量，也可以使用 ES5 或 ES6 保持一致。 

apiCall(term) {
  const params = {
    part: 'snippet',
    key: APP_KEY,
    q: term,
    type: 'video'
  };
  const _this = this;

  axios.get(APP_URL, { params: params})
   .then((response) => {
     _this.setState({
       videos: response
     });
   })
   .catch((error) => {
    console.error(error);
   });
}
其它你可能感兴趣的问题
上一篇Anet A8 难插灯丝 下一篇超大件