前端难题，有没有大佬帮帮忙，一头雾水

afadawd

代码如下，在监听事件mouseup上，我的setwhere已经执行了，视图上也已经显示了更新的where，可是第二次up时，打印的where还是100，视图却依然正常同步更新，感觉不像是异步更新的问题，因为视图是正常更新的
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { Modal } from "antd";
function JumpGame() {
    let n=1
    const dic = useRef(null)
    let speed = 0;
    let timerInterval = null;
    let startTime = 0;
    const [point,setPoint] = useState(0)
    let points = 0;
    const [open,setOpen] = useState(false)
    const [where, setWhere] = useState(-100)
    function handleok(){
        setOpen(false)
    }
    useEffect(() => {
        if(n==1){
            n=n+1      
            const width = window.innerWidth;
            const height = window.innerHeight;
            const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
            
            const scene = new THREE.Scene();         
            const renderer = new THREE.WebGLRenderer({ antialias: true });

            renderer.setClearColor(0xcccccc)
            renderer.setSize(width, height);
            camera.position.set(100, 100, 100);
            camera.lookAt(scene.position);
            
            const axesHelper = new THREE.AxesHelper( 1000 );
            axesHelper.position.set(0,0,0);
            scene.add( axesHelper );


            const directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set(40, 100, 60);
            scene.add( directionalLight );

            
            dic.current.appendChild(renderer.domElement)
            
            
            function createCube(x, z) {
                const geometry = new THREE.BoxGeometry( 30, 20, 30 );
                const material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
                const cube = new THREE.Mesh( geometry, material );
                cube.position.x = x;
                cube.position.z = z;
                scene.add( cube );
                console.log('11')
            }
            
            function createPlayer() {
                const geometry = new THREE.BoxGeometry( 5, 20, 5 );
                const material = new THREE.MeshPhongMaterial( {color: 0x000000} );
                const player = new THREE.Mesh( geometry, material );
                player.position.x = 0;
                player.position.y = 17.5;
                player.position.z = 0;
                scene.add( player )
                return player;
            }
            
            const player = createPlayer();
            
            
            
            createCube(0, 0);
            createCube(0, -100);
            
            const targetCameraPos = { x: 100, y: 100, z: 100 };

            const cameraFocus = { x: 0, y: 0, z: 0 };
            const targetCameraFocus = { x: 0, y: 0, z: 0 };
            const playerPos = { x: 0, y: 17.5, z: 0};
            const targetPlayerPos = { x: 0, y: 17.5, z: 0};

            function render() {
                movePlayer()
                moveCamera()
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }
            
            function moveCamera() {
            
                const { x, z } = camera.position;
                if(x > targetCameraPos.x) {
                    camera.position.x -= 3;
                }
                if(z > targetCameraPos.z) {
                    camera.position.z -= 3;
                }
            
                if(cameraFocus.x > targetCameraFocus.x) {
                    cameraFocus.x -= 3;
                }
                if(cameraFocus.z > targetCameraFocus.z) {
                    cameraFocus.z -= 3;
                }
            
                camera.lookAt(cameraFocus.x, cameraFocus.y, cameraFocus.z);  
            }
            
            function movePlayer() {
                if(player.position.x > targetPlayerPos.x) {
                    player.position.x -= 3;
                }
                if(player.position.z > targetPlayerPos.z) {
                    player.position.z -= 3;
                }
                player.position.y += speed;
                speed -= 0.3;
                if(player.position.y < 17.5) {
                    player.position.y = 17.5;
                }
            }
            render();
            let focusPos = { x: 0, y: 0, z: 0 };
            dic.current.addEventListener('click', (e) => {
                points += 1
                setPoint(points)
                console.log(points)
                console.log(targetPlayerPos-100)
            })
            dic.current.addEventListener('mousedown', function() {
                startTime = Date.now();  // 记录鼠标按下的时间
                timerInterval = setInterval(() => {
                    // 可以做一些实时更新的操作，例如显示秒表等
                }, 100);  // 设置一个定时器，每100ms执行一次
            });
              
              // 鼠标松开事件
            dic.current.addEventListener('mouseup', function() {
            if (timerInterval) {
                let ss=Math.random()*(80-40)+40
                clearInterval(timerInterval);  // 停止计时器
                let elapsedTime = Date.now() - startTime;  // 计算耗费的时间（毫秒）
                console.log(`耗费时间: ${elapsedTime} 毫秒`);
                targetCameraPos.z = camera.position.z - elapsedTime*0.1
                targetCameraFocus.z -= elapsedTime*0.1
                targetPlayerPos.z -=elapsedTime*0.1;
                speed = 5;
                console.log(targetPlayerPos.z+2.5)
                if(targetPlayerPos.z+10<where || targetPlayerPos.z-10>where){
                    console.log(targetPlayerPos.z+10)
                    console.log(targetPlayerPos.z+10<where)
                    console.log(targetPlayerPos.z-10>where)
                    console.log(where)
                    console.log(targetPlayerPos.z)
                    setOpen(true)
                }
                let st = targetPlayerPos.z-ss
                console.log(st)
                setWhere(st)
                createCube(0,targetPlayerPos.z-ss)
            }
            });
        }
    }, [])

  return (
  <div>
    <div ref={dic}>Jump Game{point}{where}</div>
    <Modal
    title="Title"
    open={open}
    onOk={handleok}
    >
    <p>败了</p>
    </Modal>
  </div>);
}
export default JumpGame;

FishC

看起来您的代码中存在一些问题，可能导致`where`在`console.log`中没有更新。以下是一些常见问题和改进建议：

1. **变量名与状态**：
   - 在`useState`中，您似乎省略了变量名。确保您正确命名状态钩子。例如：
   

const [where, setWhere] = useState(-100);
     const [open, setOpen] = useState(false);
     const [point, setPoint] = useState(0);

2. **状态更新与闭包**：
   - `useState`中的`where`在事件处理函数中可能受到闭包的影响。因此，在`mouseup`中使用`where`变量时，它可能没有实时更新。
   - 您可以通过函数式更新确保每次状态更新都使用最新的状态值。例如：
   

setWhere((prevWhere) => {
         const newWhere = computeNewWhereValue(prevWhere);
         return newWhere;
     });

3. **事件绑定与状态使用**：
   - React状态不是原始变量，它在事件中可能不会立即反映最新的变化。这是因为状态更新是异步的，尤其是在处理事件时。
   - 如果需要使用最新值，可以考虑把值放到`useRef`中，然后在事件中读取。

4. **调试日志**：
   - 在`mouseup`事件中，使用`console.log`确保打印的是当前状态：
   

console.log(`当前where值: ${where}`);

看看这些建议是否能帮助您解决问题。如果需要更多帮助，您可以逐步简化代码，逐一排查问题。希望这些建议对您有帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。