javascript - react 钩子(Hook) : paradigm transition problem from sync to async

Question

我刚开始使用 React 钩子(Hook)，但遇到了问题。在下面的组件中，我通过 react 钩子(Hook)更新了一个值，并将其用作函数的参数。问题是钩子(Hook)是异步的，所以当我调用函数时，值是未定义的。
这是代码:

react 钩子(Hook):

const [selectedLocation, setSelectedLocation] = React.useState()

我需要更新 selectedLocation 的功能:

  const sendLocationToDevice = (loader = true) => {
    props.dispatch({type: "CLEAR_ERROR"})
    const resObj = CalculateBearing({
      a: {lat: props.store.position.latitude, long: props.store.position.longitude},
      b: {lat: selectedLocation.coordinates.lat, long: selectedLocation.coordinates.lng} // -> here's the value is undefined
    })

我更新 selectedLocation 值的表单:

          <View>
          { selectedLocation === null ? (
            <GooglePlacesAutocomplete
              placeholder='Enter Location'
              minLength={2}
              autoFocus={false}
              returnKeyType={'default'}
              fetchDetails={true}
              onPress={(data, details = null) => {
                setSelectedLocation({name: details.formatted_address, coordinates: details.geometry.location})
                sendLocationToDevice()
              }}

流程是:用户使用表格选择位置并调用函数计算方位。与旧 this.setState一切都是同步的，所以我没有问题，现在我不确定最好的模式是什么，或者我是否误用了钩子(Hook)......我应该如何解决这个问题？

Answer 1

您可以使用 React.useEffect Hook 以监听您的 selectedLocation 的更改状态然后调用sendLocationToDevice那里。

例如，

function MyComponent() {
  const [selectedLocation, setSelectedLocation] = React.useState(null)

  React.useEffect(() => {
    if (selectedLocation === null) return

    function sendLocationToDevice() {
      // ...
    }
    sendLocationToDevice()
  }, [selectedLocation])

  return (
    <GooglePlacesAutocomplete 
      onPress={(data, details = null) =>
        setSelectedLocation({
          name: details.formatted_address, 
          coordinates: details.geometry.location})
        })
      }
    />
  )
}

React.useEffect 内部的回调将始终在 selectedLocation 时调用更改，它将具有 selectedLocation 的最新值.

编辑:

作为替代方案，您可以将回调传递给 setSelectedLocation并在其中调用其他函数。唯一的缺点是你不会使用你的 state不再，所以这可能会也可能不会导致问题。

function MyComponent() {
  const [selectedLocation, setSelectedLocation] = React.useState(null)

  function sendLocationToDevice(locationData) {
    // ...
  }

  return (
    <GooglePlacesAutocomplete 
      onPress={(data, details = null) => {
        const locationData = {
          name: details.formatted_address,
          coordinates: details.geometry.location
        }
        sendLocationToDevice(locationData)
        return locationData // updates state
      }}
    />
  )
}

但是，我认为第一个解决方案在我看来更干净更好，所以我会选择 useEffect钩。