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