如何将从 Firestore 获取的数据作为道具传递给组件答案

【问题标题】：How to pass on data that are fetched from Firestore as props to a component如何将从 Firestore 获取的数据作为道具传递给组件
【发布时间】：2021-05-11 19:41:47
【问题描述】：

我正在使用此代码从 Cloud Firestore 获取数据

const [profile, setProfile] = useState({});
useEffect(() => {
  const fetchDoc = async() => {
    const response = await db.collection("users").doc(id).get();
    const data = response.data();
    setProfile({...data});
  }
  fetchDoc();
}, []);

这会将对象保存为如下所示的状态

{
  name: 'sample name',
  tertiary: {
    name: ['sample 1', 'sample 2', ...]
  },
  ...
}

第一次加载页面时，console.log(profile) 返回一个空对象。但是，据我所知，useEffect 在安装后触发，并获取数据。之后，console.log(profile) 现在返回获取的对象。

现在，由于某种原因，当我将 profile.tertiary.name 作为 props 传递给组件时，我收到一条错误消息，指出它是 undefined。每次页面第一次挂载时都会发生这种情况，之后 useEffect 不会做任何事情。

<CustomBioList education={profile.tertiary.name} />

在<CustomBioList /> 组件中，我很简单地尝试console.log(props) 检查它是否获取数据。我是否以错误的方式获取数据？我没有掌握 useEffect 的完整概念。

【问题讨论】：

标签： reactjs google-cloud-firestore use-effect

【解决方案1】：

profile.tertiary 最初是undefined，因此尝试访问profile.tertiary.name 会引发错误。

您可以通过将<CustomBioList education={profile.tertiary.name} /> 替换为(profile.tertiary ? <CustomBioList education={profile.tertiary.name} /> : <span>Loading...</span> 或类似名称来添加检查。

【讨论】：

有没有办法可以立即获取数据，然后渲染页面？
您必须等待获取数据（数据库不会立即返回，因此需要await）。如果您希望在获取数据之前不呈现任何内容，您可以简单地先返回一个空白页，如果 profile.tertiary 是 undefined。
我假设当useEffect 触发时，它会导致DOM 的重新渲染，但错误似乎停止了它？不是这样吗？
状态修改时会导致重新渲染（所以在数据库调用完成后，不一定是在调用useEffect时）。只有在那之后，React 才会尝试重新渲染并且由于 undefined 错误而无法这样做。

【解决方案2】：

每当我们将数据传递给未定义的道具时，如您的情况，数据（profile）最初是{}，因此当组件第一次挂载时，它会将道具传递为profile.tertiary.name，这应该成为undefined，因为useEffect 尚未运行。

更好的方法是这样的：

<CustomBioList education={profile && profile.tertiary && profile.tertiary.name} />

这不过是确保profile 有一个对象tertiary。

其他解决方案可能是，仅在组件具有某些价值时才渲染组件，如下所示：

(!!profile && !!profile.tertiary && <CustomBioList education={profile.tertiary.name} />)

【讨论】：