Question 136745 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React not rendering the updates in object

I’ve used the React component, if I console the object its showing the object key-value in it. But if I access it in Component its undefined.

I have initialized the object like this,

let faeko = new Faeko({}, client)

After the user login, the faeko object updated with occupants. Its showed in console, because of Javascript’s live updation in logged values.

I used the useEffect and setTimeout for adding delay for updating the value in Component. But its not.

This is my GameFrame.jsx. Its logging the occupants value. If its showing then It should render the occupants in DOM. But its not.

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>
  );
};

What should I do, Its working in single tab. If I need to join the second user in the room I’ve created, its not rendering. Is it resolvable?

If you want to join a google meet, ask me!
I’ve wasted 5 days in this……

Tags:

2

Answers


  1. 0

    Based on your code and description, it seems that the issue is related to the asynchronous nature of the props.game object update. When you log the props.game.data in the useEffect hook, you may see the updated value because it logs the value immediately after it gets updated. However, when you try to access the start state variable that depends on props.game.data in the return statement, it may still have the initial value because the state update may not have happened yet.

    One way to fix this issue is to add a conditional check in the return statement to render the component only when the start state variable has been updated with the new props.game.data value.

    An updated version of your code with this check:

    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>
  );
};

    In this code, the if statement in the return statement checks if the start object is not empty. If it’s empty, it returns null to render nothing. Once the start object gets updated with the new props.game.data value, the component will be re-rendered with the updated value.

    Also note that I moved the timer declaration inside the useEffect hook to avoid potential issues with multiple timers running simultaneously, and added a cleanup function to clear the timeout on component unmount.

    Login or Signup to reply.
  2. 0

    looks like you are trying to change the gamestate component using the props.game.data but as objects are passed as reference if the props.game.data object is being updated outside of the GameFrame it wont re render so thats why i suggest using useeffect so you can pass a unique identifier as a prop to the GameFrame component

    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} />

    i suggest use this identification prop for gameframe

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search