Question

当我尝试在onClick事件中触发usePosition钩子时遇到一些麻烦。

我要实现的是延迟浏览器触发的地理位置许可提示，直到用户单击某些元素。

到目前为止，我尝试的是以下代码的许多变体，但没有成功：

const IndexPage = () => {
        const [geolocation, setGeolocation] = useState({});
        const [isGeolocationActive, triggerGeolocation] = useState(false);
        let currentPosition = usePosition();

        function handleGeolocation() {
            if (isGeolocationActive) {
                setGeolocation(currentPosition)
                console.log('geolocation', geolocation)
            } else triggerGeolocation(true);
        }

        return (
            <Layout>
                <Wrapper type={`list`} classNames={`wrapper pet__cards cards__list`}>
                    <Card>
                        <Image/>
                        <div onClick={() => handleGeolocation()}>Click me to share my location</div>

我尝试设置一个useState钩子（最初设置为false），如果设置为true，则该钩子应控制并处理usePosition钩子，但浏览器仍会尽快请求地理位置许可我登陆页面。

编辑：我也尝试过将usePosition钩子放在另一个组件中，并将其称为onClick事件。但是，在这种情况下，我会遇到一些挂钩规则错误，例如：

“无效的挂钩调用。只能在主体内部调用挂钩功能组件。可能发生以下情况之一原因...”

Answer 1

最后，我使用另一个组件中的usePosition钩子解决了这个问题，

import React from "react";
import {usePosition} from "use-position";

const Geolocation = () => {
    let currentPosition = usePosition();

    return (
        <div>
            <p>{currentPosition.latitude}</p>
        </div>
    )
};
export default Geolocation;

在我的主要组件中，我使用了useState钩子来控制渲染，如下所示：

const IndexPage = () => {
    const [geolocation, setGeolocation] = useState('');

    function handleGeolocation() {
        setGeolocation(<Geolocation/>);
    }

    return (
        <Layout>
            <Card>
                <Image/>
                <div onClick={() => handleGeolocation()}>Click me to share my location</div>
                {geolocation}
                ...

触发usePosition（）钩子onClick元素

1 个答案: