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

Question

我用作Firebase后端，架构如下

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

首先我用async这样的函数来获取

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;

然后我将检索到的数据传递到我的卡组件，如下所示。

ListHospital.js

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


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

export default ListHospitals;

最后，我想访问我在CARD组件中作为 props 传递的所有数据，但是当我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;

Answer 1

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

导出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作为 prop 传递给Card而不是 as 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>
  );
}