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请求的回调函数未绑定。当你将一个函数传递给另一个函数（作为一个回调）时，＆＃34;这个＆＃34;将是最终调用它时所处的上下文的引用，而不是它在编写它时的内容。如果你使用箭头函数，它将保留你编写它时的上下文。

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

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

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

ReactJS无法读取未定义

1 个答案: