javascript ReactJS 无法读取未定义的属性 setState

ReactJS Cannot read property setState of undefined

提问by Ellery Leung

I am new to ReactJS, and somewhat understand that this question is duplicated to numeral questions in SOF.

我是 ReactJS 的新手，有点理解这个问题与 SOF 中的数字问题重复。

But I hope someone can give me some directions and clarifications on some concepts of React.

但我希望有人可以就 React 的一些概念给我一些指导和说明。

What I want to do is simply get data from remote REST API using axiosor isomorphic-fetchbefore the screen is loaded.

我想要做的只是使用axios或isomorphic-fetch在加载屏幕之前从远程 REST API 获取数据。

However, I saw quite a lot of similar React tutorials, I still did not get the point.

不过看了好多类似的React教程，还是没看懂。

Here is my code:

这是我的代码：

import React, { Component } from 'react';
import axios from 'axios'

// import InputRow from './components/InputRow';
import './App.css';

// require('es6-promise').polyfill();
// require('isomorphic-fetch');

class App extends Component {

 constructor(props) {
  super(props);

  const app_id = '<my_app_id>';

  const version = 0.1;
  this.luisURL = `https://westus.api.cognitive.microsoft.com/luis/api/v2.0/apps/${app_id}/versions/${version}`;

  // this.getLUISIntent = this.getLUISIntent.bind(this);

  this.state = {
   intentOptions: [],
   utterance: '',
   intent: ''
  };
 }

 getLUISIntent = () => {
  const subscription_key = '<my_subscription_key>';

  const URL = this.luisURL + '/intents';

  return axios.get(URL, {
   headers: {
    "Content-Type": 'application/json',
    "Ocp-Apim-Subscription-Key": subscription_key
   },
  })
  .then(function(res){
   this.setState({intentOptions: res.data});
  });
 }

 componentWillMount = () => {
  // this.setState({
  //  intentOptions: this.getLUISIntent()
  // });
 }

 componentDidMount = () => {
  this.getLUISIntent();
 }

 componentDidUpdate = (prevProps, prevState) => {
  console.log("state: ", this.state);
  // this.submitToLUIS();
 }

 shouldComponentUpdate = (nextProps, nextState) => {
  return true;
 }

 submitToLUIS = () => {
  console.log("Submit to LUIS: ", this.state);
 };

 setIntent = (e) => {
  this.setState({intent: e.target.value});
 };

 setUtterance = (e) => {
  this.setState({utterance: e.target.value});
 };

 render() {
  return (
   <div className="App">
    <div className="container">
     <div className="row">
      <div className="col-sm-4">Utterance</div>
      <div className="col-sm-4">Intent</div>
      <div className="col-sm-4"></div>
     </div>
     <div className="row">
      <div className="col-sm-4">
       <input className="form-control utterance" type="text" onChange={this.setUtterance} />
      </div>
      <div className="col-sm-4">
       <select className="form-control intent" onChange={this.setIntent}>
        <option key="intent_defualt" value="">Select...</option>
        {this.state.intentOptions.map((obj, i) =>
         <option key={obj.id} value={obj.id}>{obj.name}</option>
        )}
       </select>
      </div>
      <div className="col-sm-4">
       <button className="btn btn-primary" onClick={this.submitToLUIS}>Create</button>
      </div>
     </div>
    </div>
        </div>
     );
   }
}

export default App;

Here are my questions:

以下是我的问题：

• I want to load the list before showing the whole UI, what is missing in this code?
• Is it correct here to use arrow function in getLUISIntent?
• Can I use async/awaitin getLUISIntent()?
• To me, async/awaitmeans waiting for the response from function before executing the next "line". Is this concept correct?
• If I need to write an additional this.__my_fancy_function__ = this.__my_fancy_function__.bind(this)to use a class function, using arrow function seems writes less code and more readable, why not everyone use it?
• Are there any Fetch remote API before loading anything using ReactJS tutorial no splitting different component but showing everything in only single App.js No BS so that everyone can see how a REST API-simple ReactJS app is runtutorial out there? If there is no such thing I would like to write it. But before that I hope someone can help clear my thought first.

• 我想在显示整个 UI 之前加载列表，这段代码中缺少什么？
• 在这里使用箭头函数是否正确getLUISIntent？
• 我可以使用async/await的getLUISIntent()？
• 对我来说，async/await意味着在执行下一个“行”之前等待函数的响应。这个概念正确吗？
• 如果我需要写一个额外的this.__my_fancy_function__ = this.__my_fancy_function__.bind(this)来使用类函数，使用箭头函数似乎代码更少，可读性更强，为什么不是每个人都使用它？
• 那里有Fetch remote API before loading anything using ReactJS tutorial no splitting different component but showing everything in only single App.js No BS so that everyone can see how a REST API-simple ReactJS app is run教程吗？如果没有这样的东西，我想写它。但在此之前，我希望有人能帮助我先理清思路。

Thank you very much in advance for your kind help.

非常感谢您的帮助。

回答by Jason Spradlin

your callback function from the ajax request is not bound. When you pass a function to another function (as a callback), "this" will be a reference to the context it is in when it is finally called, as opposed to what it is when you wrote it. If you use an arrow function, it will keep the context it had when you wrote it.

来自 ajax 请求的回调函数未绑定。当您将一个函数传递给另一个函数（作为回调）时，“this”将是对它最终被调用时所处上下文的引用，而不是您编写它时的上下文。如果您使用箭头函数，它将保留您编写它时的上下文。

.then(function(res){
        this.setState({intentOptions: res.data});
    });

If you make this function an arrow function, the issue should be resolved.

如果将此函数设为箭头函数，则问题应该得到解决。

.then((res) => this.setState({intentOptions: res.data}));