我正在尝试将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}) }) }