Блог

Я не могу понять, почему это происходит

Я использую React для создания веб-приложения

У меня есть объект Javascript, который называется user_info

 var user_info = {
    username: '',
    password: '',
    f_name: ''
};
  

Теперь я хочу присвоить эти значения тем, которые я извлекаю из своей базы данных firebase в реальном времени.

  db.ref("/users").on("value", snapshot => {                           
            
            alert("Firebase "   snapshot.child("username").val()) // Got the value correctly.....

            user_info.username = snapshot.child("username").val();
            user_info.password = snapshot.child("password").val(); //Assigning it to the object...
            user_info.f_name = snapshot.child("f-name").val();
            
            alert("Firebase Username = "   user_info.username); //Assigned Successfully...
           
        });
  

После этого блока кода (вне snapshot function ) я снова использую alert() для отображения имени пользователя.

 alert(user_info.username); // No value is displayed here.
  

Я предполагаю, что значение из моментального снимка не присвоено объекту user_info . Позже я экспортирую этот объект и импортирую его в другой файл, где сталкиваюсь с той же проблемой.

 export {user_info};
  

— В другом файле ———

 import React from 'react';
import {user_info} from './users.js';

function LandingPage()
{
  return(
      <div className="container">
         <h1>Welcome {user_info.username}</h1> // Only 'Welcome' is displayed
      </div>
   );
}

export default LandingPage;
  

Я не могу понять, почему значение не присваивается объекту user_info . Пожалуйста, исправьте мой код, чтобы я мог сохранить значение в своем объекте.

Спасибо.

значение обновляется, но компонент не перенаправляется. используйте состояние (useState hook) здесь, затем отобразите его из состояния. и используйте перехватчики useEffect для обновления состояния при обновлении «user_info».

 import React,{useState,useEffect} from 'react';
import {user_info} from './users.js';

function LandingPage()
{
const [userInfo,setUserInfo]=useState({});

useEffect(()=>{
setUserInfo(user_info);
},[user_info]);


  return(
      <div className="container">
         <h1>Welcome {userInfo?.username}</h1> // Only 'Welcome' is displayed
      </div>
   );
}

export default LandingPage;
  

https://reactjs.org/docs/state-and-lifecycle.html