React Native: состояние становится неопределенным внутри подключаемой функции useCallBack

Question

Состояние становится неопределенным внутри перехватчика useCallBack. Я думаю, что он не получает область видимости для переменной состояния

const [selectedLocation, setSelectedLocation] = useState()
const selectLocationHandler = (event) => {
    setSelectedLocation({
        lat: event.nativeEvent.coordinate.latitude,
        lng: event.nativeEvent.coordinate.longitude
    })
    console.log('set location', selectedLocation)
}

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [])

установить местоположение Iam get Object {"lat": 37.775030512686214, "lng": -122.4273883345241,}

где savelocation не определено в консоли

Answer 1

Вы должны предоставить selectedLocation в качестве зависимости. В противном случае обратный вызов не будет обновляться при изменении состояния.

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [selectedLocation])

Если вы предоставите пустой массив в качестве зависимости, функция useCallback всегда будет иметь начальное состояние и никогда не будет обновляться (selectedLocation). Это то же поведение, которое useEffect имеет