NextJS getServerSideProps 将数据传递给 Page Class答案

【问题标题】：NextJS getServerSideProps pass data to Page ClassNextJS getServerSideProps 将数据传递给 Page Class
【发布时间】：2021-05-13 15:22:55
【问题描述】：

我知道这可能已经被问过了，但我现在不知道该怎么做。我不是（非常）有经验的 javascript 或 NextJS 开发人员。

我的问题(1)：我得到了方法：export const getServerSideProps: GetServerSideProps = async () => {} 实现了从集成 API 获取一些数据（来自 NextJS 的pages/api）。代码本身可能写得不好（或更糟），但它可以工作。（至少现在）

export const getServerSideProps: GetServerSideProps = async () => {
    try {
        // get userID
        await fetch("http://localhost:32147/api/v1/user/get?requestedField=userID&fieldName=username&fieldValue=<value removed>").then(
            (userIDResponse: Response): any => {
                // get userID as json
                userIDResponse.json().then((userIDResult: Response): any => {
                    // get messages
                    fetch(
                        "http://localhost:32147/api/v1/message/get?requestedField=*&fieldName=userID&fieldValue=" +
                            JSON.stringify(userIDResult[0].userID)
                    ).then((messageResponse: Response): any => {
                        // get messages as json
                        messageResponse.json().then((messageResult) => {
                            return {
                                props: { messages: messageResult },
                                {/* marker1 */}
                            }
                        })
                    })
                })
            }
        )
    } catch (error) {
        console.log(error)
    }
}

为了清楚起见，这种方法有效，数据提取有效，但只要我在 marker1
访问它我返回道具的那一部分：

return {
props: { messages: messageResult },
}

我不能这样做，因为 nextjs 会因为 getServerSideProps() 没有返回任何东西而中断。我试图将最终数据存储到一个变量中，我在此方法的第一行声明了该变量，但它最终始终为空。

我该如何解决这个问题？

我的问题(2)：如果我在此方法结束时设置手动值进行测试，它不会传递给主页面类 (index.tsx) 我可以使用this.props.<prop name> 访问它，在这种情况下：this.props.messages，对吧？

整个index.tsx：

import React, { Component } from "react"
import { GetServerSideProps } from "next"
import Router from "next/router"
import Head from "next/head"

import Navbar from "../lib/Navbar"
import MessagesModal from "../lib/MessagesModal"

export const getServerSideProps: GetServerSideProps = async () => {
    try {
        // get userID
        await fetch("http://localhost:32147/api/v1/user/get?requestedField=userID&fieldName=username&fieldValue=<value removed>").then(
            (userIDResponse: Response): any => {
                // get userID as json
                userIDResponse.json().then((userIDResult: Response): any => {
                    // get messages
                    fetch(
                        "http://localhost:32147/api/v1/message/get?requestedField=*&fieldName=userID&fieldValue=" +
                            JSON.stringify(userIDResult[0].userID)
                    ).then((messageResponse: Response): any => {
                        // get messages as json
                        messageResponse.json().then((messageResult) => {
                            return {
                                props: { messages: messageResult },
                            }
                        })
                    })
                })
            }
        )
    } catch (error) {
        console.log(error)
    }
}

interface HomeProps {
    messages?: []
}

export default class Home extends Component<HomeProps> {
    constructor(props) {
        super(props)
    }

    state = {
        messagesModal: false,
        messages: [],
    }

    // triggers logout
    triggerLogOut(): void {}

    render(): JSX.Element {
        return (
            <>
                <Head>
                    <title>OneDrive Event Connector</title>
                </Head>
                <Navbar
                    ItemClickCallback={(callbackItem: string): void => {
                        if (callbackItem === "messages") {
                            this.setState({ messageModal: !this.state.messageModal })
                        } else if (callbackItem === "log_out") {
                            this.triggerLogOut()
                        } else {
                            Router.push("/" + callbackItem)
                        }
                    }}
                />
                <div className="app-content"></div>
                <MessagesModal
                    messages={this.props.messages}
                    isOpen={this.state.messagesModal}
                    toggleModal={() => {
                        this.setState({ messageModal: !this.state.messagesModal })
                    }}
                />
            </>
        )
    }
}

这只是一个让我练习和学习的“有趣”项目。
如果有人能给我提示一下我的问题/错误是什么，那就太好了...

谢谢。

亲切的问候
奥利弗

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

我不能这样做，因为 getServerSideProps() 没有返回任何东西，nextjs 会崩溃。

完全正确 - 在您的代码中，您在一系列承诺中返回值 - 您需要确保每个步骤都返回值

这是一个工作示例 - 与交换 API 类似的流程 - 帮助您了解如何返回某些东西，从链式承诺的内部返回

export const getServerSideProps: GetServerSideProps = async () => {
    try {
        // initial fetch
        const result = await fetch("https://jsonplaceholder.typicode.com/todos/1")
            .then((todosResponse: Response): any => {
                return todosResponse.json().then((todo) => {
                    // fetch something more
                    return fetch(
                        "https://jsonplaceholder.typicode.com/users/" + todo.userId
                    ).then((userResponse: Response): any => userResponse.json());
            })
        })
        return {
            props: { messages: result },
        }
    } catch (error) {
        console.log(error)
    }
}

我的建议也是阅读更多关于 JS 世界中的 promises / async await

我的问题(2) 我可以使用 this.props 访问它，在这种情况下：this.props.messages，对吧？

是的，没错

interface HomeProps {
    messages?: []
}
export default class Home extends Component<HomeProps> {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <>
                {JSON.stringify(this.props.messages)}
            </>
        )
    }
}

【讨论】：