CODEWITHSUNDEEP
reactjspost
abrahampromise
abrahampromise

Reputation: 11

update the state of my component with the response data after Post request with axios

I'm trying to update the state of my component with the response data after Post request with axios but it returns an empty array when I log out the updated state with console.log(), but shows the response.data information received with .then in axois in the broswer console. Please help me out

Code starts here

const [offers, setOffers] = useState({});//THIS IS THE STATE

const search async (e) => {
    e.preventDefault();
 
    const options = {
      url: "localhost:8080/api/search",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json;charset=UTF-8",
      },
      data,
    };

    axios(options)
      .then((response) => {
         console.log(response.data.data);// THIS RETURNS OBJECT DATA GOTTEN FROM THE SERVER AFTER POST REQUEST

        setOffers(response.data.data); //IT DOES NOT UPDATE WITH RESPONSE DATA
        console.log(offers); = IT RETURNS AND EMPTY ARRAY
      })
      .catch(function (error) {
        if (error.response) {
          setValerr(error.response.data.errors);
          console.log(error.response);
        }
      });

   
  };

thanks in advance

Upvotes: 1

Views: 1743

Answers (2)

Prajul Aaditya
Prajul Aaditya

Reputation: 329

Have you tried,

const [offers, setOffers] = useState([]) //THIS IS THE STATE

Upvotes: 0

Dagur Leó
Dagur Leó

Reputation: 708

In react, setState is asynchronous, so when you call "setOffers" it is an asyncronous action. Therefore when you call console.log, offers might not be updated yet.

You can read more about it here: https://reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous

To listen to the value of "offers" you might need to use useEffect

An example


const [offers, setOffers] = useState({}) //THIS IS THE STATE

const search = async (e) => {
  e.preventDefault()
  const options = {
    url: 'localhost:8080/api/search',
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json;charset=UTF-8',
    },
    data,
  }

  axios(options)
    .then((response) => {
      console.log(response.data.data) // THIS RETURNS OBJECT DATA GOTTEN FROM THE SERVER AFTER POST REQUEST

      setOffers(response.data.data) //IT DOES NOT UPDATE WITH RESPONSE DATA
      console.log(offers)
    })
    .catch(function (error) {
      if (error.response) {
        setValerr(error.response.data.errors)
        console.log(error.response)
      }
    })
}

useEffect(() => {
  // This should log offers to the console if it has been set
  if(offers) {
    console.log(offers)
  }
}, [offers])

Upvotes: 1

Related Questions