Question

我目前面临着更新我创建的上下文的问题，该上下文是根据从getInitialProps提取的数据得出的结果

我不断得到undefined的{{1}}

我的逻辑是：

创建一个具有空状态的StateContext。
获取StateContext中的初始数据，更新/page/_app.js
使用react钩子在StateContext组件中显示更新的StateContext。

另一个问题：我认为我的取货很好，但是我不确定。

这是我的StateContext：

TopPost.js

然后，我在import React, { createContext, Component } from 'react' const StateContext = createContext(); class StateProvider extends Component { constructor(props) { super(props); this.state = { top_posts: null, summary_metrics: null }; } render() { const { value } = this.props return ( <StateContext.Provider value= {this.state}> {this.props.children} </StateContext.Provider> ); } } export default StateProvider;中获取初始数据：

/page/_app/js

在此处使用获取的数据：

import "../styles/main.css";
import fetch from 'isomorphic-unfetch';
import App from 'next/app';
import StateProvider from '../components/contexts/StateContext';
import { AuthProvider } from '../components/contexts/AuthContext';

export default class MyApp extends App {
    static async getInitialProps() {
        try {
            const [data1, data2] = await Promise.all([
                fetch('https://www.mocky.io/v2/5ecefb253200006800e3ce8d'),
                fetch('https://www.mocky.io/v2/5ed071f73500007300ff9c38'),
            ])

            let top_post = data1
            let summary_metrics = data2

            console.log("top_post", top_post);
            console.log("summary_metrics", summary_metrics);

            return { 
                top_post: top_post,
                summary_metrics: summary_metrics
             }
        } catch (err) {
            console.log(err);
        }      
    }

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

        return (
            <AuthProvider> 
                <StateProvider value={{ top_post: this.top_post, summary_metrics: this.summary_metrics }}>
                    <Component {...pageProps} />
                </StateProvider>
            </AuthProvider>
        );
    }
}

Answer 1

您可以尝试在@RequestHeaderNonNull中传递this.props吗？

MyApp

我还认为您应该在<StateProvider value={{ ...this.props }}> <Component {...pageProps} /> </StateProvider>中更改value道具

StateProvider

-编辑

我注意到的事情

确保您使用的是默认导入

    render() {
        const { value = {} } = this.props
        return (
            <StateContext.Provider value={{...this.state, ...value}}>
                {this.props.children}
            </StateContext.Provider>
        );
    }

响应必须转换为json

import fetch from "isomorphic-unfetch";

即使您修复了这些问题，您也会得到

const [data1, data2] = await Promise.all([ fetch('https://www.mocky.io/v2/5ecefb253200006800e3ce8d').then(response => response.json()), fetch('https://www.mocky.io/v2/5ed071f73500007300ff9c38').then(response => response.json()), ])

现在我不知道它是由沙箱引起的还是代码中存在其他问题。

React：如何将数据从getInitialProps传递到Context API？

1 个答案: