gpt4 book ai didi

javascript - Next.JS -- getInitialProps 通过 ContextProvider 将 props 和状态传递给子组件

转载 作者:行者123 更新时间:2023-11-28 17:07:53 24 4
gpt4 key购买 nike

我正在 _App.js 中使用 getInitialProps() 来获取一些 api 数据,我想通过 React Context 将这些数据作为 props 传递给我的其他组件。我想通过构造函数用状态初始化上下文提供程序。

首先,我通过createContext()初始化上下文。

config/Context.js:

import { createContext } from 'react';
const Context = createContext();
export default Context;

然后我使用构造函数在其自己的组件中创建 Context.Provider 来初始化状态。

provider/ContextProvider.js:

import React, { Component } from 'react';
import Context from '../config/Context';

class ContextProvider extends Component {
constructor(props) {
super(props);

this.state = {
filters: {
active: true,
headerActive: false
}
};
}

render() {
return (
<Context.Provider>
{this.props.children}
</Context.Provider>
);
}
}

export default ContextProvider;

_app.js 中,我在 getInitialProps() 中进行 API 调用,并将该数据传递到上下文提供程序中。

pages/_app.js

import App, { Container } from 'next/app';
import ContextProvider from '../provider/ContextProvider';
import fetch from 'isomorphic-unfetch';

export default class MyApp extends App {
static async getInitialProps() {
const res = await fetch('https://node-hnapi.herokuapp.com/news');
let data = await res.json();

console.log(data)
return { articles: data }
}

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

return (
<Container>
<ContextProvider value={{ articles: this.props.articles}}>
<Component {...pageProps} />
</ContextProvider>
</Container>
);
}
}

此时,我假设我可以通过 Context.Consumer 或像 useContext() 这样的钩子(Hook)访问上下文,但以下组件中未定义上下文:

components/ArticleList.js:

import React from 'react';
import Context from '../config/Context';

const ArticleList = () => {
const generateArticles = () => {
const context = React.useContext(Context);
console.log(context, 'context') // Context is undefined here
// return context.articles.map(article => <p>{article.title}</p>)
// Error: Cannot read property 'articles' because context is undefined
}

return (
<div>
<h3>Article List</h3>
{generateArticles()}
</div>
);
};

export default ArticleList;

为什么 components/ArticleList.js 中上下文未定义?我尝试通过 Context.Consumer 将上下文传递到组件中,得到了相同的结果。

这里是复制该问题的存储库:https://github.com/joelhoelting/next-context-api-test

最佳答案

ContextProvider.js中,您忘记将value传递给Context.Provider

import React, { Component } from 'react';
import Context from '../config/Context';

class ContextProvider extends Component {
constructor(props) {
super(props);

this.state = {
filters: {
active: true,
headerActive: false
}
};
}

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

export default ContextProvider;

关于javascript - Next.JS -- getInitialProps 通过 ContextProvider 将 props 和状态传递给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55289944/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com