Question

您可以看到我正在记录从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));
        });
};

Answer 1

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

gatsby-node.js createPages没有将数据发送到pageContext

1 个答案: