Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？

如何解决Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？

我正在尝试获取 map 以访问比特币的实时价格。我试图将 getServerSideProps 的返回道具传递给我的 coingecko-api 组件，它是 <CalculatorBuy /> 组件的一部分。我试图在 <Main /> 中导入异步函数，但我得到了未定义的对象。如何将道具从 calculatorbuy.js 传递到 index.js 和 main.js 组件。在 index.js 中，一切都像魅力一样，但我想直接在组件中使用 props 值。

calculatorbuy.js

index.js

export default function Home(props) {

  const {data} = props.result;
  console.log(data);

  return (
    <div className="container">
      <Head>
        <title>Buy BTC</title>
        <link rel="icon" href="/favicon.ico" />
        <Meta name="viewport" content="width=device-width,initial-scale=1.0"></Meta>
      </Head>
      <Header />

      <Main />

      <Footer />
      <style jsx> {`
        .container {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `} </style>
    </div>
  )
}

export async function getServerSideProps(context) {
  const result = await coinGeckoClient.simple.price({
      ids: "bitcoin",vs_currencies: "eur",});
  return {
      props: {
          result,},}
  
}

main.js

import React,{ useState } from 'react';
import Button from '@material-ui/core/Button';
import Calculatorbuy from './calculatorbuy.js'
import Calculatorsell from './calculatorsell.js'
  

export default function Main() {
    const [ showMe,setShowMe ] = useState(true);
    function toggle (){
        if  (!showMe) {
            setShowMe(true);
        }
        else {
            setShowMe(true);
        }
    }
    function toggle2 (){
        if  (showMe) {
            setShowMe(false);
        }
        else {
            setShowMe(false);
        }
    }
    
    return (
        <main className="main">
            <div className="Box">
                <div className="buttons">

                    <Button onClick={toggle} variant="outlined" color="primary" style={{width: 120,marginRight: 10}}>
                        KUP
                    </Button>
                    <Button onClick={toggle2} variant="outlined" color="secondary" style={{width: 120,marginRight: 10}}>
                        SPRZEDAJ
                    </Button>
                    <Button variant="outlined" color="default" style={{width: 120,}}>
                        HISTORIA
                    </Button>
                </div>
                <div style={{ display: showMe?"block":"none" }}>
                    <Calculatorbuy />
                </div>
                <div style={{ display: !showMe?"block":"none" }}>
                    <Calculatorsell />
                </div>
            </div>
            <div className="room-for-socials"></div>

解决方法

通过在 index.js(getServerSideProps) 上加载结果，您开始得很好。

然后，要将数据传递给 Main，您必须将其添加为组件的属性：

<Main data={data} />

现在，由于 Main 需要一个参数，它必须在 main.js 中定义：

export default function Main(props) {
    const data = props.data;
    ...
}

然后，对于 Calculatorbuy 组件，您必须像在 Main 上一样执行相同的操作。定义 props 并使用它。

Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？

如何解决Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？

解决方法

相关推荐