why useState return empty array in react.js?

Question

I am trying to receive an array from useState when I click the first time on submit ,the usestate return an empty array and this make a probleme ?

const [order,setOrder] = useState([]);

const submit = (e) => {

 var NU =document.querySelector('#orderDesignation').value;
  var d =document.querySelector('#orderPrix').value;
   var p = document.querySelector('#origin').value;

     var q =document.querySelector('#orderQuntite').value;
    var t =document.querySelector('#orderPrixHT').value;


const  s = { orderDesignation: "d" ,orderPrix: "p" ,orderQuntite: "q" ,orderPrixHT:"t" }

console.log("s -->",s);

//s --> Object { orderDesignation: "dss", orderPrix: "1", orderQuntite: "3", orderPrixHT: 2 }

setOrder(order => [...order,s] );
 
console.log("order =",order);   //    order = Array[]   empty !!!! ?

}

score 0 · Answer 1 · answered Apr 26 '22 at 19:44

0

Because setOrder command is not a immediate command ,React may delay it and because your console.log is in next line in same function, it will returns the default value of order that is empty array.

answered Apr 26 '22 at 19:44

Hesam

450
2
11

you can try to change your default order state and check your console.log to be sure. – Hesam Apr 26 '22 at 19:45
how can I wait all data for save in Usestate before console.log() ? – cazorna 77 Apr 26 '22 at 20:09

why useState return empty array in react.js?

1 Answers1