Question

我找不到任何人问这个问题的事实，这可能意味着我没有完全理解某些内容，或者搜索的关键字错误，因此如果这是一个错误，请不要犹豫。愚蠢的问题。

我要粘贴代码的相关部分，但是如果您想查看完整示例的仓库，请here it is。完整的问题将在底部。

这是我的文件夹结构：

server.js
/components
    Layout.js
/pages
    contact.js

server.js

// tells next which page to load
server.get("/contact/:id", (req, res) => {
    const actualPage = "/contact"
    const queryParams = {id: req.params.id}
    app.render(req, res, actualPage, queryParams)
})

// api uri for grabbing contacts from the database
server.get("/api/contact/:id", (req, res) => {
    Contact.findOne({first_name: req.params.id}, (error, contact) => {
        if (error) return next(error)
        res.status(200).json(contact)
    })
})

pages/contact.js

const Contact = props => (
    <Layout>
        <h1>{props.contact.first_name} {props.contact.last_name}</h1>
    </Layout>
)

// a static async call passes fetched data into the props
Contact.getInitialProps = async function (context) {
    const {id} = context.query
    const res = await fetch(`http://localhost:3000/api/contact/${id}`)
    const contact = await res.json()
    return {contact: contact}
}

components/Layout.js

const Layout = (props) =>
<div>
    <div>
        <Link href="/contact/John">
            <a>John</a>
        </Link>
        <Link href="/contact/Jed">
            <a>Jed</a>
        </Link>
        <Link href="/contact/Fred">
            <a>Fred</a>
        </Link>
    </div>
    {props.children}
</div>

我正在尝试确定是否可以动态查询数据库以构建数据库中文档的导航。我能想到的唯一方法是通过重新渲染每个组件的整个导航，但这似乎非常不必要。同样，如果您想尝试一下代码，请here's my example repo。

Answer 1

我想到的方法之一是使用custom app.js并添加componentDidMount方法（仅触发一次），您可以在其中获取所有联系人，并将其存储在app.js状态中，向下传递到页面和组件。

_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 };
  }

  // store contacts in the state
  state = {
    contacts: undefined
  };

  componentDidMount() {
    // get contacts and store them in the _app.js state
    fetch('some-api/all-contacts-endpoint').then(contacts => {
       this.setState({ contacts });
    });
  }

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

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

pages / contact.js

// contacts will be inside props here
const Contact = props => (
  <Layout contacts={props.contacts}>
    <h1>
      {props.contact.first_name} {props.contact.last_name}
    </h1>
  </Layout>
);

// a static async call passes fetched data into the props
Contact.getInitialProps = async function(context) {
  const { id } = context.query;
  const res = await fetch(`http://localhost:3000/api/contact/${id}`);
  const contact = await res.json();
  return { contact: contact };
};

components / Layout.js

const Layout = ({ contacts = [] }) => (
  <div>
    <div>
      {contacts.map(contact => (
        <Link key={contact.id} href={`/contact/${contact.id}`}>
          <a>{contact.name}</a>
        </Link>
      ))}
    </div>
    {props.children}
  </div>
);

希望这会有所帮助！

服务器端在React中使用Next.js加载全局组件

1 个答案: