gatsby-node.js createPages未将数据发送到pageContext中的组件 [英] gatsby-node.js createPages is not sending data to component in pageContext

问题描述

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

You can see I'm logging the data returned from my lambda function. The data is definitely coming back as expected. However, in the createPage(...), the allMessages in pageContext in the dashboard.js component is always 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));
        });
};

我被封锁了.感谢您分享您的专业知识！

I'm blocked. Thank you for sharing your expertise!

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

This doesn't work either. Same undefined in 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));
        });
};

推荐答案

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

The context data you're passing in CreatePages is already accessible in your DashboardPage component as a prop.
Instead of trying to take it into your DashboardPage component as a parameter, try accessing the allMessages data directly with this.props.pageContext.

这篇关于gatsby-node.js createPages未将数据发送到pageContext中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！