React useState is 1 step behind the real value of the variable-CodePudding

I know that it's repeat, but i don't understand how to fix it in my case I send put request to server, but it has old value, what i should do?

React code:

const [sizeValue, setSizeValue] = useState(basketItem.clotheSize)

<select
   name={"size"}
   className={"sizeSelector"}
   value={sizeValue}
   onChange={e => {
      setSizeValue(e.target.value)
      updateClothesSize(basketItem.id, sizeValue)
   }}
>
  <option value="s">s</option>
  <option value="m">m</option>
  <option value="l">l</option>
  <option value="xl">xl</option>
  <option value="xxl">xxl</option>
</select>

axios code:

export const updateClothesSize = async (id, size) => {
    const {data} = await $host.put('api/basket/'   id, {clothesSize: size})
    return data
}

CodePudding user response：

useState will not update the state value immediately. You can fix your issue by either directly passing the value to updateClothesSize(basketItem.id, e.target.value).Or use a useEffect in which you'll call updateClothesSize.

useEffect(() => {
  updateClothesSize(basketItem.id, sizeValue)
},[sizeValue])