前端难题求解，有木有大佬帮帮忙，一头雾水
代码如下，在监听事件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 = useState(0)
let points = 0;
const = useState(false)
const = 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;
你在描述中提到的问题出在第二次鼠标松开时，打印的 `where` 变量值不正确。但是，React 状态是异步更新的，这通常导致在状态更新后立即读取其值时会获取到更新前的值。
在你的代码中，出现这个问题可能是因为你在 `setWhere(st)` 后立即尝试访问 `where` 的值。React 的 `useState` 更新是异步的，你需要意识到在 `setWhere` 被调用后，`where` 不会立即更新。
如果你想在状态更新后执行某些操作，可以考虑使用 `useEffect` 钩子来监听状态的变化。
以下是一些建议，以便帮助你调试和解决这个问题：
1. **确保状态钩子声明正确**: 目前你的状态钩子格式不完全正确，应该如下声明：
const = useState(false);
const = useState(-100);
2. **使用 `useEffect` 监听状态变化**: 假如你想在 `where` 更新之后立即执行某些操作，可以使用 `useEffect`：
useEffect(() => {
console.log("where 发生了变化: ", where);
// 在这里可以执行更多基于 where 的逻辑
}, );
3. **调试**: 调试时可以在控制台打印详细信息，这样可以帮助你理解状态是如何变化的，尤其是在那些异步操作中。
4. **简化状态更新对应逻辑**: 在需要确保逻辑执行顺序时，考虑使用 `async/await` 或者 Promise 进行处理，确保状态更新完成后再进行下一个操作。
通过以上优化，你可以更可靠地处理和调试你的 React 组件状态更新问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]