ReactJS 使用异步 setState 更新状态的最佳方式

Question

I started working with reactjs recently and I know setState() is asynchronous, but if I have the following code below:

// the state is an object

const [addressState, setAddress] = useState({
  adrStNumber: null,
  adrStreet: null,
  adrCity: null,
  adrState: null,
  adrZipcode: null,
  adrCountry: null
})

// this function is called when I select an option in the input

function getAddressAndSaveToState(address) {
    address.map(adr => {
      if (adr.types.includes('street_number')) {
        const adrStNumber = adr.long_name
        setAddress({ ...addressState, adrStNumber: adrStNumber })
      }

      if (adr.types.includes('route')) {
        const adrStreet = adr.long_name
        setAddress({ ...addressState, adrStreet: adrStreet })
      }

      if (adr.types.includes('administrative_area_level_1')) {
        const adrState = adr.long_name
        setAddress({ ...addressState, adrState: adrState })
      }
    })
  }

Great, after the first if, we have our state like this:

{
  adrCity: null
  adrCountry: null
  adrStNumber: "65"
  adrState: null
  adrStreet: null
  adrZipcode: null
}

But because setState is asynchronous, the second if, the ...addressState is still with its initial value (adrStNumber from the last iteration is null), so after the iteration the state will look like this:

{
  adrCity: null
  adrCountry: null
  adrStNumber: null
  adrState: "New York"
  adrStreet: null
  adrZipcode: null
}

In this example, everytime there is a if iteration, I need to add something to my state object. What is the best way to implement something like this?

Answer 1

You can buld your object inside your function's body and assign it to the state after all if are checked. Something like below:

// this function is called when I select an option in the input

function getAddressAndSaveToState(address) {
    address.map(adr => {
      let newAddress = {...addressState}
      if (adr.types.includes('street_number')) {
        const adrStNumber = adr.long_name
         newAddress.adrStNumber = adrStNumber
      }

      if (adr.types.includes('route')) {
        const adrStreet = adr.long_name
        newAddress.adrStreet = adrStreet
      }

      if (adr.types.includes('administrative_area_level_1')) {
        const adrState = adr.long_name
        newAddress.adrState = adrState
      }

      setAddresss(newAddress)
    })

Answer 2

You can try this:

function getAddressAndSaveToState(address) {
  address.map(adr => {
    const newAddressState = {};

    if (adr.types.includes('street_number')) {
      const adrStNumber = adr.long_name
      newAddressState.adrStNumber = adrStNumber;
    }

    if (adr.types.includes('route')) {
      const adrStreet = adr.long_name
      newAddressState.adrStreet = adrStreet;
    }

    if (adr.types.includes('administrative_area_level_1')) {
      const adrState = adr.long_name
      newAddressState.adrState = adrState;
    }

    setAddress({ ...addressState, ...newAddressState });
  })
}