Question

我有一个页面，该页面将显示有关已部署以测试网络的合同的详细信息。如果从上一页进入该页面，则一切都将正确显示。但是，一旦刷新页面，道具（合同地址）就不会正确传递到此页面。

import react, { Component } from "react";
import Layout from "../../components/layout";
import Campaign from "../../campaign";
import { Card, Grid, Button } from "semantic-ui-react";
import web3 from "../../web3";
import ContributeForm from "../../components/ContributeForm";
import {Link} from '../../routes'

class CampaignShow extends Component {

  static async getInitialProps(props) {
    const campaign = Campaign(props.query.address);
    const address = props.query.address;
    const summary = await campaign.methods.getSummary().call();

    return {
      address,
      minimumContribution: summary[0],
      balance: summary[1],
      requestsCount: summary[2],
      approversCount: summary[3],
      manager: summary[4]
    };
  }

  renderCards() {


     const {
       balance,
       manager,
       minimumContribution,
       requestsCount,
       approversCount
     } = this.props;

    const items = [
      {
        header: manager,
        meta: "Address of Manager",
        description:
          "The manager created this campaign and can create requests to withdraw money",
        style: { overflowWrap: "break-word" }
      },
      {
        header: minimumContribution.toNumber(),
        meta: "Minimum Contribution (wei)",
        description:
          "You must contribute at least this much wei to become an approver"
      },
      {
        header: requestsCount.toString(),
        meta: "Number of Requests",
        description:
          "A request tries to withdraw money from the contract. Requests must be approved by approvers"
      },
      {
        header: approversCount.toString(),
        meta: "Number of Approvers",
        description:
          "Number of people who have already donated to this campaign"
      },
      {
        header: web3.utils.fromWei(balance.toString(), "ether"),
        meta: "Campaign Balance (ether)",
        description:
          "The balance is how much money this campaign has left to spend."
      }
    ];

    return <Card.Group items={items} />;
  }

  render() {
    return (
      <Layout>
        <h3>Campaign Show</h3>
        <Grid>
          <Grid.Row>
            <Grid.Column width={10}>{this.renderCards()}</Grid.Column>

            <Grid.Column width={6}>
              <ContributeForm address = {this.props.address} />
            </Grid.Column>
          </Grid.Row>

          <Grid.Row>
            <Grid.Column>
              <Link route={`/campaigns/${this.props.address}/requests`}>
                <a>
                  <Button primary>View Requests</Button>
                </a>
              </Link>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Layout>
    );
  }
}

export default CampaignShow;

刷新页面时，页面应正确获取道具并显示合同的详细信息。

Answer 1

当您通过单击/链接从一个页面路由到另一页面时，您将从客户端获得道具。如果您希望刷新页面时该页面也能正常工作，则必须设置服务器端路由并将查询参数从服务器传递到该页面，然后它将按预期运行。你可以使用这个插件 https://github.com/fridays/next-routes

刷新页面时，道具未正确传递到getInitialProps（）

1 个答案: