当前位置 : 主页 > 网页制作 > JQuery >

jquery – this.setState()不是函数 – >尝试保存状态响应时

来源:互联网 收集:自由互联 发布时间:2021-06-15
我正在尝试将get请求的响应保存到状态属性上.这是我的代码: import React, { Component } from 'react';import {render} from 'react-dom';import './App.css';import Card from './Card.js';import SearchBar from "./SearchBar.
我正在尝试将get请求的响应保存到状态属性上.这是我的代码:

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})
     })
 }
网友评论