如何在next.js中获取_app.js的状态？

Question

我已经使用next.js在_app.js中启动了状态。我想在index.js文件中使用此状态。我该如何访问？

这是我的_app.js代码：

import React from "react";
import App, { Container } from "next/app";
import Layout from "../components/Layout";

export default class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      currencyType: {
        name: "Ether",
        price: 1
      },
      ethPriceUsd: 1
    };
  }

  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    let ethPriceUsd;

    if (Component.getInitialProps) {
          fetch(`https://api.coingecko.com/api/v3/coins/ethereum/
        `)
        .then(result => result.json())
        .then(data => {
          ethPriceUsd = parseFloat(data.market_data.current_price.usd).toFixed(
            2
          );
        });
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps, ethPriceUsd };
  }

  componentDidMount() {
    const ethPriceUsd = this.props.ethPriceUsd;
    this.setState({ ethPriceUsd });
  }

  onCurrencyTypeChange(currencyTypeValue) {
    let currencyType = {};
    //Value comes from Header.js where Ether is 0 and USD is 1
    if (currencyTypeValue) {
      currencyType = {
        name: "USD",
        price: this.state.ethPriceUsd
      };
    } else {
      currencyType = {
        name: "Ether",
        price: 1
      };
    }
    alert("We pass argument from Child to Parent: " + currencyType.price);
    this.setState({ currencyType });
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Layout changeCurrencyType={this.onCurrencyTypeChange.bind(this)}>
          <Component {...pageProps} />
        </Layout>
      </Container>
    );

}}

其中很多是不相关的（例如将数据传递到Layout等）。我想要做的就是例如在index.js中使用此状态

谢谢

Answer 1

假设您在中有此代码_app.js。

import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  state = {
    name: "Morgan",
  }

  render () {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} {...this.state}/>
      </Container>
    )
  }
}

请注意state和<Component {...pageProps} {...this.state}/>

解决方案1：

现在，让我们看看如何使用它index.js或任何其他页面

import React from 'react';

export default class Index extends React.Component {

  render() {
    return (
      <div>
        <h2>My name is {this.props.name}</h2>
      </div>
    )
  }
}

您可以像这样将它们用作道具this.props.name

解决方案2：

在index.jsfrom中填充状态，props然后从中访问它state

import React from 'react';

export default class Index extends React.Component {

   constructor(props) {
       super(props)
       this.state ={
           name: this.props.name
       }
   }

  render() {
    return (
      <div>
        <h2>My name is {this.satate.name}</h2>
      </div>
    )
  }
}

您可以像这样将它们用作道具this.state.name