从数据库中获取后如何传递道具？答案

【问题标题】：How can I pass props after fetching from database?从数据库中获取后如何传递道具？
【发布时间】：2021-10-28 20:49:11
【问题描述】：

我使用Firebase 作为后端，架构如下

const sample_data = {
  Name: "",
  Address: "",
  Contact_no: "",
  Email: "",
  img_url: ""
}

首先，我使用 asyncfunction 这样的函数获取

FetchList.js


let dummy = {}

async function getItems(){
    const response = await fetch('realtime__database__of__firebase__url');
    
    if (!response.ok) {
        throw new Error("Something went wrong");
      }
  
      dummy = await response.json();
}
getItems();
export default dummy;

然后我将检索到的数据传递给我的 card 组件，就像这样。

ListHospital.js

import Card from "../UI/Card";
import dummy from "./FetchList";


const ListHospitals = () => {
    return <Card>
        {dummy}
    </Card>
}

export default ListHospitals;

最后我想访问我在CARD 组件中作为道具传递的所有数据，但是当我在这里console.log 时，输出是undefined，当我在获取数据后console.log 时，它会给出合适的输出。 我遇到的问题是在获取数据之前正在导出 FetchList 组件。

Card.js

import classes from "./Card.module.css";


const Card = (props) => {

    let url = props.children.img;
    console.log(url);
    return <div>
                <img src={props.children.img} alt={props.children.Name}></img>

                <h1 >{props.children.Name}</h1>
                <p>{props.children.Address}</p>
                <h3 >Contact</h3>
                <p>{props.children.Email}</p>
                <p>{props.children.Contact_no}</p>

</div>
}

export default Card;

【问题讨论】：

尝试将FetchList.js 中的getItems(); 更改为await getItems();，这样行吗？
不，它肯定会抛出一个错误，因为在 async 函数之外调用了 getItems()。所以 await 不起作用
FetchList 不是 React 组件。当组件挂载（或按需）时，您应该从 React 组件生命周期方法或 useEffect 挂钩中获取数据。
我试过useEffect 仍然无法达到理想的解决方案:(你能说出你的答案吗:)
导出getItems 函数在ListHospitals 组件中创建一个状态> 在ListHospitals 组件中创建另一个async function 以调用您的getItem 函数并将其设置为状态。在useEffect 中调用新函数。不要通过道具将对象作为children 传递。用另一个道具名称传递它。

标签： javascript reactjs async-await react-props

【解决方案1】：

FetchList 不是 React 组件。当组件挂载（或按需）时，您应该从 React 组件生命周期方法或 useEffect 钩子中获取数据。

导出getItems函数：

async function getItems(){
  const response = await fetch('realtime__database__of__firebase__url');
    
  if (!response.ok) {
    throw new Error("Something went wrong");
  }
  
  return response.json();
}

export default getItems;

在组件挂载时加载。将data 作为道具传递给Card，而不是children。

import { useEffect, useState } from 'react';
import Card from "../UI/Card";
import getItems from "./FetchList";

const ListHospitals = () => {
  const [data, setData] = useState({});

  useEffect(() => {
    getItems()
      .then(data => setData(data))
      .catch(error => {
        // fetch can return rejected Promise, maybe handle it?
      });
  }, []);

  return <Card data={data} />;
}

卡 - 访问 data 属性。

const Card = ({ data }) => {
  const url = data.img;
  console.log(url);

  return (
    <div>
      <img src={data.img} alt={data.Name} />
      <h1 >{data.Name}</h1>
      <p>{data.Address}</p>
      <h3>Contact</h3>
      <p>{data.Email}</p>
      <p>{data.Contact_no}</p>
    </div>
  );
}

【讨论】：