为什么我不能用Next.js的getInitialProps获取我的小狐狸钱包账户地址？

我正在使用Next.js在我的以太坊应用程序中实现服务器端渲染，但我无法获取Metamask地址以将其显示在我的index.js文件中导航栏的右上角。目前，我的getInitialProps()函数返回一个空数组有人能帮我把这件事做好吗？

我使用的是web3 v1.0.0-beta35
我已登录Metamask(使用5.3.1版)
我正在使用web3.eth.getAccounts()从Metamask获取帐户
我已经授予该应用程序访问Metamask帐户的权限，根据他们的突破性更改

有几次刷新时确实会弹出地址，但大多数情况下都不起作用

以下是该项目的回购：https://github.com/jviray/buidl-box

下面是我的index.js文件的代码，该文件包含给我带来问题的组件。地址应该显示在导航栏的右上角，上面写着｛this.props.accounts[0]｝。

import React, { Component } from 'react';
import Head from 'next/head';
import { Jumbotron, Button } from 'react-bootstrap/lib';
import web3 from '../ethereum/web3';
class Welcome extends React.Component {
static async getInitialProps() {
const accounts = await web3.eth.getAccounts();
return { accounts };
}
render() {
const jumbostyle = {
textAlign: 'center',
marginTop: '30px'
};
return (
<div>
<Head>
<title>BUIDL</title>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
{/* -- Latest compiled and minified CSS */}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</Head>
{/* NAVBAR */}
<nav className="navbar navbar-inverse navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<a href="#" className="navbar-brand">
BUIDL
</a>
</div>
{/* NAVBAR ITEMS */}
<ul className="nav navbar-nav navbar-right">
<li className="navbar-brand">{this.props.accounts[0]}</li>
</ul>
</div>
</nav>
<Jumbotron>
<div className="container" style={jumbostyle}>
<h1>Welcome, Ethereum Devs!</h1>
<p>
As a community we need to start building new and powerful
applications that truly add value.
</p>
<p>
<a href="https://www.coindesk.com/dont-hodl-buidl-blockchain-tech-will-add-value-2018">
<Button bsStyle="primary">Learn more</Button>
</a>
</p>
</div>
</Jumbotron>;
</div>
);
}
}
export default Welcome;

有趣的是，如果我添加组件状态并使用React的"；异步组件DidMount()"；使用提取的帐户设置State()，我可以在刷新后使其一致工作而不会出现问题

但同样，目标是使用getInitialrops在服务器端获取帐户，而我无法实现这一点。

以下是当我使用"；异步组件DidMount()"；

import React, { Component } from 'react';
import Head from 'next/head';
import { Jumbotron, Button } from 'react-bootstrap/lib';
import web3 from '../ethereum/web3';
class Welcome extends React.Component {
state = {
accountAddress: ''
};
async componentDidMount() {
const accounts = await web3.eth.getAccounts();
this.setState({
accountAddress: accounts[0]
});
}
render() {
const jumbostyle = {
textAlign: 'center',
marginTop: '30px'
};
return (
<div>
<Head>
<title>BUIDL</title>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
{/* -- Latest compiled and minified CSS */}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</Head>
{/* NAVBAR */}
<nav className="navbar navbar-inverse navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<a href="#" className="navbar-brand">
BUIDL
</a>
</div>
{/* NAVBAR ITEMS */}
<ul className="nav navbar-nav navbar-right">
<li className="navbar-brand">{this.state.accountAddress}</li>
</ul>
</div>
</nav>
<Jumbotron>
<div className="container" style={jumbostyle}>
<h1>Welcome, Ethereum Devs!</h1>
<p>
As a community we need to start building new and powerful
applications that truly add value.
</p>
<p>
<a href="https://www.coindesk.com/dont-hodl-buidl-blockchain-tech-will-add-value-2018">
<Button bsStyle="primary">Learn more</Button>
</a>
</p>
</div>
</Jumbotron>;
</div>
);
}
}
export default Welcome;

如果有人能解决这个问题，那将是一件很棒的事情，但我也很高兴能就可能的问题(async/await代码、Next.js、web3、React等)提供意见

我查看了您的回购。

当执行getInitialProps时，首次访问浏览器新选项卡中的页面是因为使用了web3提供程序的ura版本。它无法访问浏览器的元任务。

但如果您从另一个页面访问同一页面，则会使用web3提供者的元任务版本。所以它有账户信息。

假设你有两条路线：/home and /list，在/home页面上有

static async getInitialProps() {
const accounts = await web3.eth.getAccounts();
}

如果您在浏览器的新选项卡中访问域/主页，由于上述原因，您将得到一个空数组。但如果你从同一浏览器选项卡中的域/列表来到域/主页，你会得到你的元任务帐户信息。

相关内容

最新更新

热门标签：