Question

我试图将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'));

我尝试了多种方法让它发挥作用，但没有骰子。我尝试过带有和不带bind的this.setState（{gets：cool}）。我已经在this.setState之前控制台记录了变量cool，我得到了正确的对象数组。但是，当我尝试将我的响应保存到状态时，它说＆＃39;类型错误：this.setState（）不是函数。

我还尝试在render中调用getTheAPI（），因为该函数从未被运行，因此状态未被更新，但错误仍然存在。

我只是无法弄清楚为什么在函数中定义了响应，但没有在函数中定义，以及它为什么说this.setState（）不是函数。

帮助我Obi Wan Kenobi，你是我唯一的希望。

Answer 1

成功回调函数内部的这个内容并不是指Component的内容。由于您使用的是ES6，因此可以使用提供词法范围的arrow function。

示例：

autoplay = ""

Answer 2

试试这样。

getTheApi(){
  let _this = this;
  $.get('http://localhost:3008/people', function(cool){
     console.log(cool) 
    _this.setState({gets:cool});
  })
}

在你的构造函数中

constructor(props){
  super(props);
  this.state = {
    gets: []      //THIS IS WHERE THE RESPONSE ARR SHOULD BE SAVED 
  }
  this.getTheApi = this.getTheApi.bind(this);
}

由于this请求callback无法使用AJAX的范围。您需要将其保存在另一个变量中。

Answer 3

你需要做两件事

首先：绑定getTheApi()函数，以便它可以访问状态

第二：绑定ajax成功函数而不是状态

getTheApi = () =>{
$.get('http://localhost:3008/people', function(cool){
    console.log(cool) 
    this.setState({gets:cool})  
  }.bind(this))
}

this.setState（）不是函数 - ＆gt;当试图保存状态响应

3 个答案: