React:如何将数据从getInitialProps传递到上下文API？
React:如何将数据从getInitialProps传递到上下文API？
提问于 2020-06-22 21:15:37
我目前面临一个问题，就是用从getInitialProps获取的数据生成的结果更新我创建的上下文
我一直在为undefined StateContext
我的逻辑是：
- 创建一个空状态的
StateContext。 - 在
/page/_app.js中获取初始数据，更新StateContext - 使用react钩子在
StateContext组件中显示更新的TopPost.js。
另一个问题:我想我的取货很好，但我不确定。
这是我的StateContext：
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>
);
}
}在这里使用获取的数据：
import moment from 'moment'
import React, { useState, useEffect, useContext } from "react";
import { BsArrowUpRight } from 'react-icons/bs';
import StateContext from "../contexts/StateContext";
const TopPost =()=> {
const [posts, setPosts] = useState([]);
const context = useContext(StateContext);
console.log('State context:', context) // Context is undefined here
return (
<div>
<div className="min-w-0 max-h-screen overflow-y-scroll">
{posts.map(post => (
<div key={post.id}>
<div className='px-10 my-4 py-4 bg-white border border-8 border-gray-400 rounded-lg border-solid'>
<div className='flex justify-between'>
<span className='font-light text-black text-lg font-semibold'>@{post.username}</span>
<span className='font-medium rounded ml-56'> {moment(post.postDate).format(('L'))}. {moment(post.postDate).format(('LT'))}</span>
<a className="font-extrabold rounded text-3xl text-blue-600" href={post.postUrl} target="_blank" rel="noopener noreferrer">
<BsArrowUpRight />
</a>
</div>
<div className="mt-2">
<p className='mt-2 text-xl text-gray-600'>{post.textContent}</p>
</div>
</div>
</div>
))}
</div>
</div>
);
}
export default TopPost;回答 1
Stack Overflow用户
发布于 2020-06-22 21:28:15
你能试着通过this.props在MyApp吗？
<StateProvider value={{ ...this.props }}>
<Component {...pageProps} />
</StateProvider>另外，我认为您应该在StateProvider中更改StateProvider道具。
render() {
const { value = {} } = this.props
return (
<StateContext.Provider value={{...this.state, ...value}}>
{this.props.children}
</StateContext.Provider>
);
}-编辑
我注意到的事情
确保使用的是默认导入
import fetch from "isomorphic-unfetch";响应必须转换为json。
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()),
])即使你修好了你会得到的东西
Cannot read property 'pathname' of undefined
现在，我不知道它是由沙箱引起的，还是代码中的另一个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62523606
复制相关文章
相似问题
腾讯云开发者
