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

JavaScript React.js

2020-03-23

我已经使用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中使用此状态

谢谢

第2859篇《如何在next.js中获取_app.js的状态?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android