Как установить значение переменной состояния внутри функции в React - PullRequest
Новая
       67

Как установить значение переменной состояния внутри функции в React

0 голосов
/ 01 августа 2020

Я получаю ответ серверной части, чтобы получить информацию о драйвере с помощью Ax ios, и один раз после получения я хочу получить имя и адрес драйвера. Для этого я попытался установить значение переменной состояния, но не смог назначить, а также попытался присвоить значения переменной состояния массива и получить к ним доступ позже, но мне не удалось получить результат

Это фрагмент кода: 

    getDriverInfo = async () => {
    var session = sessionStorage.getItem("session");
    var apiBaseUrl = "http://localhost:4000/api/";
    // var self = this;
    let det = [];
    var payload = {
      nic: session,
    };

    axios
      .post(apiBaseUrl + "driverDetails", payload)
      .then(async (response) => {
        console.log(response.data.success);

        if (response.data.code == 204) {
          console.log("Driver Data retrieved successfull");
          
          response.data.success.map((element) => {
            det.push(element);
            this.state.Ddetails.push(element);
            
          });
          
          console.log(det.length);
          console.log(this.state.Ddetails[0].dln);
           await this.setState({
             fname: this.state.Ddetails[0].fName,
             lname: this.state.Ddetails[0].lName,
           });
          
        } else {
          console.log("Details does not exists");
          alert("Details does not exist");
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    
    console.log(det.length);
    this.state.Ddetails.map((item) => {
      console.log("Map");
      console.log(item.dln);
    });
    console.log(this.state.Ddetails.dln);
  };

Ответы [ 2 ]

0 голосов
/ 02 августа 2020 
this.state = {
   name: 'mickey',
   lastName: 'mouse',
};

const display = () => {
  // wont work
  console.log(this.state.name, this.state.lastName);
}

function display() {
    // will work
    console.log(this.state.name, this.state.lastName);
}

Как видите, стрелочные функции не работают с (этим)

0 голосов
/ 02 августа 2020

Не обновлять состояние напрямую это шаблон anty.

https://reactjs.org/docs/state-and-lifecycle.html#do -not-modify-state-напрямую

Я немного изменил ваш код. 

getDriverInfo = async () => {
    var session = sessionStorage.getItem("session");
    var apiBaseUrl = "http://localhost:4000/api/";
    // var self = this;
    let det = [];
    var payload = {
      nic: session,
    };

    axios
      .post(apiBaseUrl + "driverDetails", payload)
      .then(async (response) => {
        console.log(response.data.success);

        if (response.data.code == 204) {
          console.log("Driver Data retrieved successfull");
          
          response.data.success.map((element) => {
            det.push(element);
            //Don't use like this ==> this.state.Ddetails.push(element);
          });
          this.setState({Ddetails:det},()=>{
              console.log(det.length);
              console.log(this.state.Ddetails[0].dln);
              this.setState(prevState=>{
                  console.log(det.length);
                  prevState.Ddetails.map((item) => {
                      console.log("Map");
                      console.log(item.dln);
                  });
                 console.log(prevState.Ddetails.dln);
                  return{
                      fname: prevState[0].fName,
                      lname: prevState[0].lName,
                  }
              });
          })
        } else {
          console.log("Details does not exists");
          alert("Details does not exist");
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };
...