1

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

Dagur Leó
  • 698
  • 4
  • 13
abrahampromise
  • 11
  • 3
  • React set state is not synchronous. You should read up on the docs around how react updates its state. A very recent question that is a dupe of this one https://stackoverflow.com/a/69764063/2733506 – John Ruddell Oct 29 '21 at 06:13
  • Does this answer your question? [setState in react functional components is not being assigned property with assigned objects](https://stackoverflow.com/questions/69763982/setstate-in-react-functional-components-is-not-being-assigned-property-with-assi) – John Ruddell Oct 29 '21 at 06:14
  • thank you for your swift response, but when I use the axios.get to retrieve information from the server with the same method it works perfectly. it has not worked yet I'm trying to fix it – abrahampromise Oct 29 '21 at 09:11
  • Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) – juliomalves Oct 29 '21 at 21:35

2 Answers2

1

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])
Dagur Leó
  • 698
  • 4
  • 13
0

Have you tried,

const [offers, setOffers] = useState([]) //THIS IS THE STATE
Prajul Aaditya
  • 109
  • 2
  • 9