반응의 공리에서 반응 상태를 설정하는 방법

반응의 공리에서 반응 상태를 설정하는 방법

get response 상태를 axios로 설정하려면 어떻게 해야 합니다.

axios.get(response){
    this.setState({events: response.data})
}

구문 오류가 있습니다.대신 이걸 써보세요

var self = this;
axios.get('/url')
 .then(function (response) {
   console.log(response);
   self.setState({events: response.data})
 })
.catch(function (error) {
   console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'

여기에서는, 몇개의 주의사항이 있습니다.

• axios.get는 비동기 함수이며, 이는 나머지 코드가 실행됨을 의미합니다.그리고 서버의 응답이 오면 함수는 다음 주소로 넘어갑니다.then실행됩니다.의 반환값axios.get('url')는 약속 객체라고 불립니다.자세한 내용은 이쪽에서 확인하실 수 있습니다.
• this키워드는, 발신처에 따라 값이 다릅니다. this에this.setState 컨스트럭터 오브젝트를 참조할 필요가 있습니다.또, 콜을 발신했을 때에,this함수의 내부에서는, 그 함수는window물건.그래서 배정했어this변수로self자세한 내용은 여기를 참조해 주세요.

프로 팁:

ES6를 사용하는 경우 화살표 기능(자체 기능이 없음)을 사용할 수 있습니다.this를 사용합니다.this.setState할당하지 않고this변수에 대한 자세한 내용은 여기를 참조하십시오.

    axios.get('/url')
     .then((response) => {
       console.log(response);
       this.setState({events: response.data})
     })
    .catch((error)=>{
       console.log(error);
    });

다음은 에러 처리, 재시도, 로딩 등 데이터를 가져오기 위해 일반적으로 사용되는 베스트프랙티스를 포함한 완전한 예입니다.https://codesandbox.io/s/rm4pyq9m0o이것에 의해, 유저 익스피리언스가 향상됩니다.코드를 수정하고 그에 대한 더 많은 통찰력을 얻기 위해 플레이하는 것이 좋습니다.

"이것"은 공리 안에서 다르기 때문에 효과가 없습니다.공리 안에 있는 "this"는 공리 객체를 가리키며 반응 구성요소가 아닙니다.이 문제는 .bind를 사용하여 해결할 수 있습니다.

또한 공리도 올바르게 사용되고 있지 않습니다.

아마 이렇게 생겼을 거예요

axios.get("/yourURL").then(function(response) {
  this.setState({ events: response.data });
}.bind(this));

또는 es6를 사용하는 경우 화살표 함수에 대한 함수를 서브아웃하여 바인딩 없이 동일한 효과를 얻을 수 있습니다.

axios.get("/yourURL").then(response => {
  this.setState({ events: response.data });
});

이 노드를 사용해 보십시오.js

      axios.get(`https://jsonplaceholder.typicode.com/users`)
       .then(res => {
          const persons = res.data;
          this.setState({ persons });
      })

반응 js를 사용하는 경우 공리를 사용하는 것보다 먼저 성분으로 가져옵니다.

다음과 같습니다.

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

나는 리액션을 배울 때 과거에 했던 것과 비슷한 약속을 다룬 적이 있다.제가 한 일은 API 콜을componentDidMountmethod 및 상태를 초기값으로 설정합니다.데이터를 가져오는 동안 로더를 사용했습니다.

componentDidMount() {
 const self = this;
 axios.get(response){
  self.setState({ events: response.data });
}

지금으로서는 checkenrode가 말한 것과 비슷한 것을 사용하고 싶습니다.

다음과 같은 작업을 수행합니다.

  var self= this; // self will now be referred to your component

  axios.get("http://localhost:3001/get_user?id=" + id)
  .then(function (response) {
    if(response.data.rows != null)
    user_detail = response.data.rows;
    console.log(response);
    self.setState({email: user_detail.name, name: user_detail.name})
  })

언급URL : https://stackoverflow.com/questions/41194866/how-to-set-state-of-response-from-axios-in-react