我已经使用了React组件,如果我控制对象,它会显示其中的对象键值。但是如果我在Component中访问它,它的undefined
。
我已经像这样初始化了对象,
let faeko = new Faeko({}, client)
用户登录后,faeko
对象更新为occupants
。它显示在控制台中,因为Javascript在记录值中的实时更新。
我使用useEffect和setTimeout来添加延迟,以便更新Component中的值。但事实并非如此。
这是我的GameFrame.jsx
。它记录了居住者的价值。如果它的显示,那么它应该呈现在DOM中的居住者。但事实并非如此。
import React, { useEffect, useState } from "react";
export const GameFrame = (props) => {
console.log("TEST FAEKO ", props.game.data);
const [start, setStart] = useState({});
let timer;
useEffect(() => {
console.log("tested", props.game);
console.log("Props.game", props.game.data);
clearTimeout(timer);
timer = setTimeout(() => {
console.log("props gets updated!", props.game.data.occupants);
setStart(props.game.data);
}, 1000);
}, [props.game.data]);
return (
<div>
{/* {console.log("start ", start)} */}
{start.occupants !== undefined && start.occupants.length > 0 && (
// console.log("here updated", start.occupants) &&
<div>Occupants</div>
)}
</div>
);
};
我该怎么办,它的工作在单一标签.如果我需要加入我创建的房间中的第二个用户,它不会呈现。是否可以解决?
如果你想加入谷歌会议,问我!今天我已经浪费了5天......
2条答案
按热度按时间b1zrtrql1#
根据您的代码和描述,该问题似乎与
props.game
对象更新的异步特性有关。当您在useEffect
钩子中记录props.game.data
时,您可能会看到更新的值,因为它在更新后立即记录值。但是,当您尝试在return语句中访问依赖于props.game.data
的start状态变量时,它可能仍然具有初始值,因为状态更新可能尚未发生。解决此问题的一种方法是在return语句中添加一个条件检查,以便仅在使用新的
props.game.data
值更新开始状态变量时才呈现组件。带有此检查的代码的更新版本:
在这段代码中,return语句中的if语句检查start对象是否不为空。如果它为空,则返回null以不呈现任何内容。一旦start对象被新的
props.game.data
值更新,组件将被重新渲染。另外请注意,我将计时器声明移到了
useEffect
钩子中,以避免多个计时器同时运行的潜在问题,并添加了一个清除函数来清除组件卸载时的超时。mrzz3bfm2#
看起来你正在尝试使用www.example.com更改gamestate组件props.game.data,但是由于对象是作为引用传递的,如果props.game.data对象在GameFrame之外更新,它将不会重新呈现,因此这就是为什么我建议使用useeffect,这样你就可以将唯一标识符作为prop传递给GameFrame组件
我建议在游戏框架中使用这个识别 prop