gatsby-node.js createPages 没有向 pageContext 中的组件发送数据答案

【问题标题】：gatsby-node.js createPages is not sending data to component in pageContextgatsby-node.js createPages 没有向 pageContext 中的组件发送数据
【发布时间】：2019-01-01 19:07:11
【问题描述】：

您可以看到我正在记录从我的 lambda 函数返回的数据。数据肯定按预期返回。但是，在 createPage(...) 中，dashboard.js 组件中 pageContext 中的 allMessages 始终为 null/undefined。

为什么？...

dashboard.js

const DashboardPage = ({ pageContext: { allMessages } }) => (
    <Layout>
        <SEO title="Dashboard" keywords={[`gatsby`, `application`, `react`]} />
        <h1>Dashboard</h1>
        <p>Welcome to your new Gatsby site.</p>
        {console.log('allMessages: ', allMessages)}
        {allMessages.map(mssg => (
            <li
                key={mssg.id}
                style={{
                    textAlign: 'center',
                    listStyle: 'none',
                    display: 'inline-block'
                }}
            >
                <Link to={`/message/${mssg.name}`}>
                    <p>{mssg.name}</p>
                </Link>
            </li>
        ))}
    </Layout>
);

export default DashboardPage;

gatsby-node.js

exports.createPages = async ({ actions: { createPage } }) => {
    get('get-messages')
        .then(allMessages => {
            console.log('gatsby-node allMessages: ', allMessages);
            // Create a page that lists all Pokémon.
            createPage({
                path: `/dashoard`,
                component: require.resolve('./src/pages/dashboard.js'),
                context: { allMessages }
            });
        })
        .catch(err => {
            return Promise.reject(new Error(err));
        });
};

我被屏蔽了。感谢您分享您的专业知识！

编辑：

这也不起作用。在dashboard.js 中同样未定义...

exports.createPages = async ({ actions: { createPage } }) => {
    get('get-messages')
        .then(allMessages => {
            // allMessages = typeof allMessages === 'string' ? JSON.parse(allMessages) : allMessages;
            // console.log('gatsby-node allMessages: ', allMessages);
            // // Create a page that lists all Pokémon.
            const test = [{ name: 'Test message' }];
            createPage({
                path: `/dashoard`,
                component: require.resolve('./src/pages/dashboard.js'),
                context: { allMessages: test }
            });
        })
        .catch(err => {
            return Promise.reject(new Error(err));
        });
};

【问题讨论】：

标签： gatsby netlify

【解决方案1】：

您在 CreatePages 中传递的上下文数据已经可以在您的 DashboardPage 组件中作为道具访问。
与其尝试将其作为参数放入您的 DashboardPage 组件中，不如尝试使用this.props.pageContext 直接访问 allMessages 数据。

【讨论】：