如何在本機反應中根據 state 值在道具內設置條件？

Question

我正在使用組件<MapboxGL.UserLocation獲取當前用戶坐標，並且在此組件中有一個道具onUpdate ，它獲取用戶的當前位置並將其傳遞給 function，我想要的是在調用 function 之前檢查道具內state value if it is true or false and only if the state value true the function will be triggered, I have done the following but all times it call the function onUserLocationUpdate(location) even if the state is false

<MapboxGL.UserLocation
              renderMode="normal"
              visible={true}
              onUpdate={location => {
                            if (!isStartL) {
                                console.log("not start yet")
                            } else {
                                onUserLocationUpdate(location)
                            }
                        }}
   />

這是 state 我正在使用const [isStartL, setisStartL] = useState(false);

更新完整代碼：

const app = ({ navigation }) => {
  const [isStartL, setisStartL] = useState(false);
const onUserLocationUpdate = (location) => {

console.log(location);

}
  const renderLocationInfo = () => {
     
        if (!isStartL) {
            return (<View style={styles.rcontainer}>
                <Text style={styles.btn}>Press start when you are in the same location </Text>
                <TouchableOpacity onPress={setisStartL(true)} >Start</TouchableOpacity>
            </View>)

        }
    }

 return (
       <View style={styles.matchParent}>

                <MapboxGL.MapView
                   
                    surfaceView={true}
                    zoomLevel={15}
                    logoEnabled={false}
                    style={styles.matchParent}

                >

                    <MapboxGL.UserLocation
                        renderMode="normal"
                        visible={true}

                        onUpdate={(location) => {
                            (!isStartL) ? console.log("not start yet") : onUserLocationUpdate(location)
                        }}
                    />
                    <MapboxGL.Camera

                        followZoomLevel={17} 
                        followUserMode={'normal'}
                        followUserLocation={true}
                        followZoomLevel={17}
                        animationDuration={1000}
                    />

                </MapboxGL.MapView>

                {renderLocationInfo()}

            </View>
)
}

Answer 1

請執行下列操作：

    <MapboxGL.UserLocation
              renderMode="normal"
              visible={true}
              onUpdate={(location) => {
                  (!isStartL) ? console.log("not start yet") : onUserLocationUpdate(location)
              }}
   />

Answer 2

試試這樣

  <MapboxGL.UserLocation
        renderMode="normal"
        visible={true}
        onUpdate={(location) => {
          isStartL
            ? onUserLocationUpdate(location)
            : console.log('not start yet');
        }}
      />

Answer 3

一種方法是，在onUserLocationUpdate() function 中移動 if 邏輯。

如果你的 state 是假的，就從它那里返回。 否則，執行其他步驟。

這樣，您可以確保預期的行為。