Question 226756 in React native Question posted in
The official React Native documentation can be found here.

Despite updating value , old value is displayed on react native?

Here in this React component I am declaring a simple variable called companyData and assigned default value as "james". And then updated the value of companyData with a new value that I received from axios request.

Though in log, I do see updated value, but within return space (JSX), it gives only old delcared value "james" on loading component.

How can I make sure only the latest value get displayed?

function Home(props) {
  var companyData = "james";
  axios
    .post(
      "https://…..",
      {
        withCredentials: true,

        headers: {
          "Cache-Control": "no-cache, no-store, must-revalidate",
          Pragma: "no-cache",
          Expires: 0,
        },
      },
      {
        auth: {
          username: "",
          password: "",
        },
        data: {
          action: "asdf",
        },
      }
    )
    .then(function (response) {
      companyData = response.data;
      console.log(companyData); // it returs updated data received from axios post
    })
    .catch(function (error) {
      console.error(error);
    });

    return (
    <View>
      <Text>
        {companyData} // here I still received old value james as output 
      <Text>
    <View>    
   ) 
}

export default Home;
Tags:

3

Answers


  1. 0

    Replace your variable with a state (useState hook) because when Home gets called/recalled, regular variables are reinitilized since Home is a function after all.

    Now to fetch data when the component mounts we usually use useEffect for that, and with an empty dependency array [], we make the effect runs only once, after the component first render.

    import { useState, useEffect } from 'react';

// ...

function Home(props) {
  const [companyData, setCompanyData] = useState("james");

  useEffect(() => {
    axios.post(
      'https://...',
      {
        // ...
      }
    )
    .then(function (response) {
      setCompanyData(response.data);
      console.log(response.data);
    })
    .catch(function (error) {
      console.error(error);
    });
  }, []); // Empty dependency array 

  return (
    <View>
      <Text>
        {companyData}
      </Text>
    </View>
  );
}

    What will happen is that during the first render "james" is displayed since JSX is returned before useEffect runs, but you will not notice it because just after that useEffect will run and updates the state so the component rerenders and now the new value assigned to companyData is displayed during this new render.

    Good to know:
    If you want to use a variable that you don’t want to lose its value when the component rerenders you can make use of useRef

    Login or Signup to reply.
  2. 0

    You need to use React states. States should be used when you are rendering something that will change.

    How to use

    1. Declare the state. Instead of
    var companyData = "james";

    do

    const [companyData, setCompanyData] = useState("james")
    1. Whenever you want to change the state, call the setState and pass in the new value. Instead of
    .then(function (response) {
          companyData = response.data;
          console.log(companyData);
})

    do

    .then(function (response) {
          setCompanyData(response.data); // Note: this is async and won't update right away
          console.log(response.data);
})

    There are many quirks about states so you should read up on it (or watch a Youtube video), but here is what your modified code should look like:

    import React, { useState } from "react";

function Home(props) {
      
      const [companyData, setCompanyData] = useState("james")
    
      axios
        .post(
          'https://…..',
          {
            withCredentials: true,
    
            headers: {
              'Cache-Control': 'no-cache, no-store, must-revalidate',
              Pragma: 'no-cache',
              Expires: 0,
            },
          },
          {
            auth: {
              username: '',
              password: '',
            },
            data: {
              action: ‘asdf’,
            },
          }
        )
        .then(function (response) {
          setCompanyData(response.data);
          console.log(response.data);
        })
        .catch(function (error) {
          console.error(error);
        });
    
    return (
      <View>
        <Text>
          {companyData}. // here i still received old value james as output 
        <Text>
      <View>
    );
}
export default Home;
    Login or Signup to reply.
  3. 0

    In react we usually use "useState" to make variables.
    useState returns two values, the variable and a function that is used to change the variable. It writes like this :

    import { useState } from "react";
... // when declaring the function you use 
const [companyData, setCompanyData] = useState("james")

    here the initial variable is "james"
    the change it you have to use the function "setCompanyData" like so :

    setCompanyData("new data")

    so you final code should look something like this :

    import { useState, useEffect } from "react"; // At the top of the file
....
function Home(props) {
const [companyData, setCompanyData] = useState("james");
useEffect(() => {
axios
.post(
  "https://…..",
  {
    withCredentials: true,

headers: {
      "Cache-Control": "no-cache, no-store, must-revalidate",
      Pragma: "no-cache",
      Expires: 0,
    },
  },
  {
    auth: {
      username: "",
      password: "",
    },
    data: {
      action: "asdf",
    },
  }
)
.then(function (response) {
  setCompanyData(response.data)
})
.catch(function (error) {
  console.error(error);
});}, [] ) // important brackets !!!

return (
<View>
  <Text>
    {companyData} // here you will receive new value as output 
  <Text>
<View>    
) 
}

export default Home;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search