前端难题，有没有大佬帮帮忙，一头雾水
代码如下，在监听事件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`在`console.log`中没有更新。以下是一些常见问题和改进建议：
1. **变量名与状态**：
- 在`useState`中，您似乎省略了变量名。确保您正确命名状态钩子。例如：
const = useState(-100);
const = useState(false);
const = 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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]