javascript React不渲染对象中的更新

yhqotfr8  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(153)

我已经使用了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天......

b1zrtrql

b1zrtrql1#

根据您的代码和描述,该问题似乎与props.game对象更新的异步特性有关。当您在useEffect钩子中记录props.game.data时,您可能会看到更新的值,因为它在更新后立即记录值。但是,当您尝试在return语句中访问依赖于props.game.data的start状态变量时,它可能仍然具有初始值,因为状态更新可能尚未发生。
解决此问题的一种方法是在return语句中添加一个条件检查,以便仅在使用新的props.game.data值更新开始状态变量时才呈现组件。
带有此检查的代码的更新版本:

import React, { useEffect, useState } from "react";

export const GameFrame = (props) => {
  console.log("TEST FAEKO ", props.game.data);
  const [start, setStart] = useState({});
 
  useEffect(() => {
    console.log("tested", props.game);
    console.log("Props.game", props.game.data);

    const timer = setTimeout(() => {
      console.log("props gets updated!", props.game.data.occupants);
      setStart(props.game.data);
    }, 1000);

    return () => clearTimeout(timer); // clear the timeout on component unmount
  }, [props.game.data]);

  if (!Object.keys(start).length) { // check if start object is empty
    return null; // return null until it gets updated
  }

  return (
    <div>
      {start.occupants && start.occupants.length > 0 && (
        <div>Occupants</div>
      )}
    </div>
  );
};

在这段代码中,return语句中的if语句检查start对象是否不为空。如果它为空,则返回null以不呈现任何内容。一旦start对象被新的props.game.data值更新,组件将被重新渲染。
另外请注意,我将计时器声明移到了useEffect钩子中,以避免多个计时器同时运行的潜在问题,并添加了一个清除函数来清除组件卸载时的超时。

mrzz3bfm

mrzz3bfm2#

看起来你正在尝试使用www.example.com更改gamestate组件props.game.data,但是由于对象是作为引用传递的,如果props.game.data对象在GameFrame之外更新,它将不会重新呈现,因此这就是为什么我建议使用useeffect,这样你就可以将唯一标识符作为prop传递给GameFrame组件

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.identifier]);

  return (
    <div>
      {/* {console.log("start ", start)} */}
      {start.occupants !== undefined && start.occupants.length > 0 && (
        // console.log("here updated", start.occupants) &&
        <div>Occupants</div>
      )}
    </div>
  );
};
<GameFrame game={game} identifier={game.data.occupants.length} />

我建议在游戏框架中使用这个识别 prop

相关问题