现在你只需要自动调用这个函数，这样用户就可以在页面加载之前看到它。
最简单的方法？useEffect调用你已经定义的路由处理程序。
在useEffect的dependency数组中放置一个空数组，这样它只会在第一次加载时触发，就像useEffect(()=> {…}, []);一样。
所以它看起来像这样：

useEffect(()=> {
  const fetchAndSetTacosArray = async () => {

  try {
    const returnedTacoData = await getAllTacos();
    setTacoArray(returnedTacoData};
  } catch (error) {
    console.error(‘Error fetching taco data’, error);
  }

  fetchAndSetTacosArray();
}, []);

字符串
快速说明：之所以会有这个中间的fetchAndSetTacosArray，是因为你需要一个await关键字。await需要一个fetchAndSetTacosArray函数，而useEffect不能是fetchAndSetTacosArray，所以你必须把fetchAndSetTacosArray函数放在其中。
第二步：在页面上创建一个状态变量，它将在本地保存从数据库const [tacoData, setTacoData] = useState([]);返回的数据
第三步：Map出数组的项以显示项

<div>tacoArray.map((item, index)=>(<div key={index}>{taco.name} {taco.price} {taco.calories}</div>)</div>

型
别担心......玉米卷。卡路里永远不会包括在这个应用程序=）只是确保你仍然注意。
所以合起来看起来像这样：

// /app/MyTacoPage.js

import React, { useState, useEffect } from 'react';

export default function Page(props) {
  const [tacoArray, setTacoArray] = useState([]);

  useEffect(()=> { 

    const fetchAndSetTacosArray = async () => {

    try {
      const returnedTacoData = await getAllTacos();
      setTacoArray(returnedTacoData};
    } catch (error) {
      console.error(‘Error fetching taco data’, error);
    }

    fetchAndSetTacosArray();
    }, []);

  const getAllTacos = async () => {
    const response = await fetch(‘/api/tacos’, {
      method: ‘GET’
    });

    if(response.ok) {
      const { data } = await response.json();
      console.log(data);  
      return data;
    } else {
      throw New Error (‘Error on getAllTacos’);
    }
  };

  return (
  <div className=“w-screen h-screen bg-slate-300>
    <div>tacoArray.map((item, index)=>(<div key={index}>{taco.name} {taco.price} {taco.calories}</div>)</div>
  </div>
  )
};

型

如果你想使用Vercel的swr来处理数据检索，你可以这样做。

// /app/MyTacoPage.js

import React from 'react';
import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

export default function Page(props) {

  const { data: tacoArray, error, isLoading } = useSWR('/api/tacos', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
 
  return (
  <div className=“w-screen h-screen bg-slate-300>
    <div>tacoArray.map((item, index)=>(<div key={index}>{taco.name} {taco.price} {taco.calories}</div>)</div>
  </div>
  )
};

字符串
注意，如果你没有指定方法，默认值是GET。例如，如果你需要指定POST，你只需将上面的fetcher替换为{fetcher, method: POST}