從 API 為 Next.js 中的子組件調用數據

Question

我正在研究 header 組件。 這是代碼：

import style from '../../styles/header.css';
import '../../styles/globals.css';

export default function Header({data}){
    const [showMe, setShowMe] = useState(false);
   
    function toggle(){
        console.log("toggle")
        setShowMe(!showMe);
    }

    return(
        <>
        <div className="header">
          <div className="web-header">
          <div className="first-header">
                <div className="info-strip">
                  <ul>
                      <li>
                          Contact Us
                      </li>
                      <li>
                          7 Day Returns
                      </li>
                      <li>
                          Track Order
                      </li>
                      <li>
                          Return Order
                      </li>
                     
                      <li>
                         Survey
                      </li>
                  </ul>
                </div>
                <div className="right-block d-flex">
                    <div className="login">
                        <span className="image"></span>
                        <span className="text">Log In
                            <div className="account-box">
                                
                            </div>
                        </span>
                    </div>
                    <div className="cart">
                        <span className="cart-image">
                            
                        </span>
                        <span className="text">Cart</span>
                    </div>
                </div>
            </div>
            <div className="second-header">
                <div className="header-logo">
                    
                        <img src="https://www.mirraw.com/assets/logo-red.png" />
                   
                </div>
                <div className="search">
                    <input placeholder="Search Something.." />
                    <button></button>
                </div>
               
            </div>
         
            <div className="third-header">
                <div className="container-fluid">
                    <ul className="menu">
                        {data.menus.map((post, index) => {
                            return (
                                <li className="menu-list">
                                    {post.title}
                                    <div className="megabox">
                                        <ul className="wrapper">
                                            {post.menu_columns.map((subItems, sIndex) => {
                                                return <li>
                                                    <span className="menu-link">
                                                        {subItems.title}
                                                    </span>
                                                    <ul className="category">
                                                        {subItems.menu_items.map((x) => {
                                                            return <li>
                                                                {x.title}
                                                            </li>
                                                        })}
                                                    </ul>
                                </li>;
                                             })}
                                        </ul>
                                    </div>
                                </li>)})}
                     </ul>
                </div>
            </div>
          </div>
          <div className="mobile-screen">
              <div className="mobile-header">
                  <div className="mobile-menu">
                      <div className="menu-icon">
                      <div className="wrapper">
                          <input type="checkbox" id="navigation" />
                          <label for="navigation">
                               +
                          </label>
                          <div className="right-card">
                              <img src="https://www.mirraw.com/assets/logo-red.png" />
                              <p className="app-install">
                                  <span>Download app</span>
                                  
                             </p>
                              <div className="cart">
                                    <span className="cart-image"></span>
                                    {/* <span className="text">Cart</span> */}
                              </div>
                          </div>
                                <nav>
                                    <ul>
                                        <li className="menu-heading">
                                            <span>Menu</span>
                                            <span>
                                                <label for="navigation">X</label>
                                            </span>
                                            
                                        </li>
                                        {data.menus.map((post, index) => {
                            return (
                                <li className="menu-list">
                                    {post.title} <span onClick={toggle}>+</span>
                                        <ul style={{display: showMe?"block":"none"}} className="category-one">
                                            {post.menu_columns.map((subItems, sIndex) => {
                                                return <li>
                                                    {subItems.title}
                                                    <span>+</span>
                                                    <ul className="category-two">
                                                        {subItems.menu_items.map((x) => {
                                                            return <li>
                                                                {x.title}
                                                            </li>
                                                        })}
                                                    </ul>
                                                </li>;
                                             })}
                                        </ul>
                                    
                                </li>)})}
                                        
                                       
                                       
                                    </ul>
                                </nav>
                                </div>
                            </div>
                        </div>
                        <div className="scroll-menu-list">
                            <ul className="mb-0">
                                {data.menus.map((post, index) => {
                                    return (
                                        <li className="menu-list">{post.title}</li>
                                )})}
                            </ul>
                        </div>
                    </div>
                  
                </div>
              
            </div>
            </>
    )
} 

export async function getServerSideProps() {
    // Fetch data from external API
   
    const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
    
    const data = await res.json();
  
    // Pass data to the page via props
    return { props: { data } }
  }

如果我只渲染這個頁面，代碼工作正常，但是當我在其他組件中導入這個組件時，它會拋出錯誤：

服務器錯誤

TypeError：無法讀取未定義的屬性“菜單”

生成頁面時發生此錯誤。 任何控制台日志都將顯示在終端 window 中。

從 API 為子組件獲取價值的方法是什么？

Answer 1

getServerSideProps只能在頁面組件中使用，這就是當您將此組件呈現為頁面時它可以工作的原因。

如果您希望它成為可以從其他組件和/或頁面調用的可重用組件，您需要將在頁面級別（例如從getServerSideProps ）獲得的數據傳遞給它。

// pages/index.js

import Header from "../components/header"

export default function IndexPage({ data }) { 
    return (
        <Header data={data} />
    )
}

export async function getServerSideProps() {
    const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
    const data = await res.json();
    return { props: { data } }
}