改变位置else语句后组件消失

Question

我这里有这个组件：

在此输入图片描述

这是代码：

import React from "react";
import { BiLogoInstagramAlt } from "react-icons/bi";
import { FaFacebookF } from "react-icons/fa6";
import { ref, child, get } from "firebase/database";
import { getDatabase } from "firebase/database";
import { getAuth } from "firebase/auth";

export const LocationProfileCard = () => {
  const dbRef = ref(getDatabase());
  const auth = getAuth();
  const user = auth.currentUser.reloadUserInfo.localId;

  if (user !== null) {
    get(child(dbRef, `locations/identify/${user}`))
      .then((snapshot) => {
        if (snapshot.exists()) {
          let LocationName = snapshot.val().name;

          get(child(dbRef, `locations/public/${LocationName}/data/`)).then(
            (snapshot) => {},
          );
        } else {
          console.log("No data available");
        }
      })
      .catch((error) => {
        console.error(error);
      });

    return (
      <div className="card_profile_location_wrapper">
        <div className="card_profile_form_location_wrapper">
          <form className="card_profile_form_location_main">
            <div className="card_profile_location_first_section">
              <div className="card_profile_location_logo">
                <label>Logo</label>
              </div>
              <div className="card_profile_location_social_media">
                <ul className="wrapper-socialmedia_card_profile">
                  <li className="icon-insta">
                    <span className="tooltip">Instagram</span>
                    <span>
                      <BiLogoInstagramAlt />
                    </span>
                  </li>
                  <li className="icon-face">
                    <span className="tooltip">Facebook</span>
                    <span>
                      <FaFacebookF />
                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div className="card_profile_location_second_section">
              <div className="card_profile_location_data">
                <h1>Test</h1>
                <h3>Informationen</h3>
                <div className="card_profile_location_data_information_group">
                  <div className="card_profile_location_data_information">
                    <h3>Kapazität</h3>
                    <label>Daten</label>
                  </div>
                  <div className="card_profile_location_data_information">
                    <h3>Raucherbereich</h3>
                    <label>Daten</label>
                  </div>
                  <div className="card_profile_location_data_information">
                    <h3>Parkplätze</h3>
                    <label>Daten</label>
                  </div>
                  <div className="card_profile_location_data_information">
                    <h3>Verpfelgung</h3>
                    <label>Daten</label>
                  </div>
                  <div className="card_profile_location_data_information">
                    <h3>Barrierefreiheit</h3>
                    <label>Daten</label>
                  </div>
                </div>
              </div>
            </div>
            <div className="card_profile_location_third_section"></div>
          </form>
        </div>
      </div>
    );
  }
};

一旦我将这个 else 语句移到代码底部（在 return 块的右括号之后）

       } else {
   console.log("No data available");
 }

 
}).catch((error) => {
 console.error(error);
});

组件消失。我认为问题是，我将 return 块包含到我的 Javascript 代码中。这是问题吗？

有人可以解释一下为什么吗？

Answer 1

要解决这个问题，您需要基于异步数据检索来管理组件的状态和渲染。具体方法如下：

使用

useState

管理组件的状态：这将帮助您跟踪加载状态和获取的数据。 使用

useEffect

来处理副作用：这是您可以在组件安装时获取数据的地方。

  const [locationData, setLocationData] = useState(null);
  const [loading, setLoading] = useState(true);

像这样

    useEffect(() => {
    const dbRef = ref(getDatabase());
    const auth = getAuth();
    const user = auth.currentUser?.reloadUserInfo?.localId;

    if (user) {
      get(child(dbRef, `locations/identify/${user}`))
        .then((snapshot) => {
          if (snapshot.exists()) {
            let LocationName = snapshot.val().name;

            get(child(dbRef, `locations/public/${LocationName}/data/`)).then(
              (snapshot) => {
                if (snapshot.exists()) {
                  setLocationData(snapshot.val());
                } else {
                  console.log("No data available");
                }
                setLoading(false);
              },
            );
          } else {
            console.log("No data available");
            setLoading(false);
          }
        })
        .catch((error) => {
          console.error(error);
          setLoading(false);
        });
    } else {
      setLoading(false);
    }
  }, []);
 if (loading) {
    return <div>Loading...</div>;
  }

  if (!locationData) {
    return <div>No data available</div>;
  }

  return (
    <div className="card_profile_location_wrapper">
      <div className="card_profile_form_location_wrapper">
        <form className="card_profile_form_location_main">
          <div className="card_profile_location_first_section">
            <div className="card_profile_location_logo">
              <label>Logo</label>
            </div>
            <div className="card_profile_location_social_media">
              <ul className="wrapper-socialmedia_card_profile">
                <li className="icon-insta">
                  <span className="tooltip">Instagram</span>
                  <span>
                    <BiLogoInstagramAlt />
                  </span>
                </li>
                <li className="icon-face">
                  <span className="tooltip">Facebook</span>
                  <span>
                    <FaFacebookF />
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div className="card_profile_location_second_section">
            <div className="card_profile_location_data">
              <h1>Test</h1>
              <h3>Informationen</h3>
              <div className="card_profile_location_data_information_group">
                <div className="card_profile_location_data_information">
                  <h3>Kapazität</h3>
                  <label>Daten</label>
                </div>
                <div className="card_profile_location_data_information">
                  <h3>Raucherbereich</h3>
                  <label>Daten</label>
                </div>
                <div className="card_profile_location_data_information">
                  <h3>Parkplätze</h3>
                  <label>Daten</label>
                </div>
                <div className="card_profile_location_data_information">
                  <h3>Verpfelgung</h3>
                  <label>Daten</label>
                </div>
                <div className="card_profile_location_data_information">
                  <h3>Barrierefreiheit</h3>
                  <label>Daten</label>
                </div>
              </div>
            </div>
          </div>
          <div className="card_profile_location_third_section"></div>
        </form>
      </div>
    </div>
  );
};