React (useState，setState)既是对的，也是假的

Question

所以我有一个反应状态变量const [pickingHotspot, setPickingHotspot] = useState(false);。然后我有了这个按钮<button type="button" className="btn btn-outline-danger" onClick={() => setPickingHotspot(true)}>，它只是将状态设置为真onClick。我有另一个处理程序

tmp.on('mousedown', (event) => {
    if (pickingHotspot){
        console.log(tmp.mouseEventToCoords(event));
    } else {
        console.log(pickingHotspot);
    }
});

其中tmp是Pannellum360ImageViewer(它是第三方库，但我不认为它是什么)，这是在我的useState(...,[])中设置的，它只加载一次。最后，我有一个onClick div，它只输出用于调试的pickingHotspot值。奇怪的是：

当我加载页面并单击调试div时，该值为false。太好了，这很管用。然后单击按钮(应该将其设置为true!)然后再次单击调试div。价值是真的！但是当我点击Pannellum查看器时，值是假的吗？我不确定这个值怎么可能是真和 false，这取决于我单击的位置。这些变量有不同的版本/实例吗？我尝试过将所有东西链接到html组件之外和useEffect之外的各个函数处理程序，以防发生一些奇怪的作用域事件，但到目前为止，没有任何东西起作用。

我试着展示所有需要的代码，但是这里是完整的东西(我把大部分无关的东西都拿出来简化了，它有很多代码要看)：

function TourCreator(props){

    
    const [scenes, setScenes] = useState({});
    const [media, setMedia] = useState({});
    const [viewer, setViewer] = useState(null);

    // Editor states
    const [pickingHotspot, setPickingHotspot] = useState(false);


    

    function handle(event){
        if (pickingHotspot){
            console.log(viewer.mouseEventToCoords(event));
        } else {
            console.log(pickingHotspot);
        }
    }


    // Called once on load
    useEffect(() => {

        if (Object.keys(media).length == 0){

            // Sends the request to the backend for "data"
            sendGetRequest(window.$PROJECT, true, {
                id: params["project_id"],
            }).then((data) => {

                data.images = reshapeArray(data.images, 3);
                console.log(data)

                setMedia(data);
                let tmp = window.pannellum.viewer('panorama', tour)
                setViewer(tmp);

                // Print Pitch/Yaw on click
                tmp.on('mousedown', (event) => handle(event));
                
            });
        }  
        
    }, [])

    
    return (
        <div className="p-3">

            
            {/* MAIN CONTENT */}
            <div className='tour-creator-root mx-auto p-3 row rounded'>

                {/* MAIN BOX */}
                <div className='main-box col-9 px-0 rounded'>

                    {/* Pannellum viewer */}
                    <div id='panorama' className="w-100 rounded-top">
                        <button type="button" className="save-button btn btn-outline-danger">
                            Save
                        </button>

                    </div>


                    {/* Toolbar */}
                    <div className="toolbar w-100 d-flex flex-column justify-content-center rounded-bottom p-3"
                    onClick={
                        () => {
                            console.log(pickingHotspot)
                        }
                    }>

                        <div className="d-flex flex-row justify-content-around">

                            <button type="button" className="btn btn-outline-danger" onClick={
                                () => setPickingHotspot(true)
                            }>
                                Add Hotspot
                            </button>

                        </div>

                    </div>


                </div>

                
            </div>

        </div>
    )

}


export default TourCreator;

Answer 1

尝试在依赖项数组中为pickingHotspot传递useEffect。

由于空依赖数组，事件处理程序被附加到useEffect on componentDidMount中的元素。这将只发生一次，并将使用旧的函数。该旧函数将对前一个状态的值进行关。通过在pickHotSpot中传递依赖数组，您可以将事件处理程序再次附加到每个相关的状态更改上。

这也是一种推荐的方法，可以将所有相关代码保存在钩子中。您本可以将侦听器函数放入钩子中，并且可能会看到来自某个lint工具的缺少依赖项警告。

另外，如果您没有具体的理由从javascript添加像这样的事件处理程序，那么就添加内联usin，就像@MB__建议的那样。这将在每次渲染时执行，因此应该是正确的。在任何时候，只有一个晚上的特定事件将被附在一起。