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

Question

我是ReactJS的新手,并且有点理解这个问题与SOF中的数字问题重复.

但我希望有人可以就React的一些概念给我一些指示和澄清.

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

但是,我看到了很多类似的React教程,我仍然没有明白这一点.

这是我的代码:

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;

这是我的问题:

• 我想在显示整个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教程？如果没有这样的话我想写.但在此之前,我希望有人可以先帮助清除我的想法.

非常感谢你的帮助.

Answer 1

来自ajax请求的回调函数未绑定.当您将函数传递给另一个函数(作为回调)时,"this"将是对它最终被调用时所处的上下文的引用,而不是它在您编写它时的内容.如果使用箭头函数,它将保留编写时的上下文.

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

如果您将此功能设为箭头功能,则应解决该问题.

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