我正在尝试将get请求的响应保存到状态属性上.这是我的代码: import React, { Component } from 'react';import {render} from 'react-dom';import './App.css';import Card from './Card.js';import SearchBar from "./SearchBar.
import React, { Component } from 'react';
import {render} from 'react-dom';
import './App.css';
import Card from './Card.js';
import SearchBar from "./SearchBar.js"
import star from './images/star.svg';
import wars from './images/wars.svg';
import $from './../node_modules/jquery';
class App extends Component {
constructor(props){
super(props);
this.state = {
gets: [] //THIS IS WHERE THE RESPONSE ARR SHOULD BE SAVED
}
}
////////////////////////////
// GET REQUEST //
////////////////////////////
getTheApi(){
$.get('http://localhost:3008/people', function(cool){
console.log(cool) //<-- the response is correct (array of objs)
this.setState({gets:cool}).bind(this) //have tried w/ w/out .bind(this)
})
}
render() {
console.log(this.state.gets); //shows as undefined
return (
<div className='content'>
<div className='logo'>
<img src={star} alt="star-logo" />
<span className='interview-text'>The Interview</span>
<img src={wars} alt="wars-logo" />
<span>WHATTTTTT</span>
</div>
<SearchBar />
<Card />
</div>
);
}
}
render(<App/>, document.getElementById('app'));
我已经尝试了多种方法来实现这一点,但没有骰子.我试过带有和没有绑定的this.setState({gets:cool}).我控制台在this.setState之前记录了变量cool,我得到了正确的对象数组.但是,当我尝试将我的响应保存到状态时,它说’类型错误:this.setState()不是函数.
我也尝试在render中调用getTheAPI(),思考状态没有被更新,因为函数从未被运行,但错误仍然存在.
我只是无法弄清楚为什么响应是在函数中定义的,而不是函数的定义,以及它为什么说this.setState()不是函数.
帮助我Obi Wan Kenobi,你是我唯一的希望.
成功回调函数内部的这个并不是指Component的内容.由于您使用的是ES6,因此可以使用 arrow function提供词法范围.例:
getTheApi = () => {
$.get('http://localhost:3008/people', (cool) => {
this.setState({gets:cool})
})
}
