javascript - ReactJS 使用异步 setState 更新状态的最佳方法

Question

我最近开始使用reactjs，我知道 setState() 是异步的，但是如果我有下面的代码:

// 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 })
      }
    })
  }

太好了，在第一个 if 之后，我们的状态如下:

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

但是因为 setState 是异步的，所以第二个 if ...addressState 仍然是其初始值(上次迭代的 adrStNumber 为 null)，因此迭代后状态将如下所示:

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

在这个例子中，每次有一个 if 迭代，我都需要向我的状态对象添加一些东西。实现这样的事情的最佳方法是什么？

Answer 1

您可以在函数体内构建对象，并在检查所有 if 后将其分配给状态。如下所示:

// 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)
    })