>

postdata.js라는 함수 구성 요소 파일이 있는데 app.js 내부에서 사용하고 있습니다. 포스트 데이터 안에 API에서 값을 가져 오는 함수가 있습니다 (작동 중). 그러나 호출 된 postdata 함수에서 this.setState를 사용하여 API 결과 값에 할당하면 오류가 발생합니다.

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

postdata.js :

export function Postdata(url=''){
  return fetch(url).then(
     function(response){
         console.log("response.json()::",response)
         return response.json();
    })
}

app.js :

import React, { Component } from 'react';
import logo from './logo.svg';
import {Table} from 'reactstrap';
import './App.css';
import {Postdata} from './postdata';
class App extends React.Component {
  constructor(props){
    super(props);
      this.state = {
          hits: 'sduhyh',
          result_:[]
      }
 //this.Postdata = this.Postdata.bind(this)
    }
    componentDidMount() {}
  postdata_fire(){
    Postdata('http://localhost:3000/places').then(function(result){
      console.log("result::",result);
      this.setState({result:'sdujoij'})
})

    this.setState({hits:'yahittsss'})
    console.log("hits:::",this.state.hits); 
  }
  render() {
    return (
      <div className="App container">

   <div>{this.state.hits}</div>
        <button onClick={this.postdata_fire.bind(this)}></button>
      </div>
    );
  }
}
export default App;

도움을주세요.

  • 답변 # 1

    다음과 같이 postdata_fire를 리팩터링해야합니다 :

    postdata_fire() {
     Postdata('http://localhost:3000/places').then(result => {
       console.log("result:: %j",result);
       this.setState({result_: result});
     });
     ...
    }
    
    

    및 포스트 데이터도 :

    export const Postdata = (url='') => {
      return fetch(url).then(response => {
        console.log("response.json()::",response)
        return response.json();
      });
    }
    
    
    

  • 답변 # 2

    약속 응답이이 범위를 공유하지 않으므로 then response 안에 화살표 기능을 사용하십시오 ...

    
      postdata_fire(){
        Postdata('http://localhost:3000/places').then((result) =>{
          console.log("result::",result);
          this.setState({result:'sdujoij'})
        })
        this.setState({hits:'yahittsss'})
        console.log("hits:::",this.state.hits); 
      }
    
    

  • 이전 php - 내 웹 사이트에서 이미지를 볼 수 없습니다
  • 다음 vue.js - Vuex mapstate가 컴포넌트에 정의되어 있어도 정의되지 않은 오류가 발생합니다