从A传递数据的useContext
从A传递数据的useContext
提问于 2020-09-25 15:51:13
我正在尝试使用useContext将数据从JSON文件传递到一个组件：
import sessionData from '../session.json';
import React from 'react';
export const SessionContext = React.createContext(sessionData);
export const SessionProvider = SessionContext.Provider;
export const SessionConsumer = SessionContext.Consumer;
console.log('session data', sessionData); //console log ok接下来，我将把它传递给一个类组件
static contextType = SessionContext;
componentDidMount() {
const sessId = this.context;
console.log('steps', sessId); // log ok
}
render() {
return <SessionProvider value={sessId}> //value returns undefined.
<Child A />
<Child B />
<Child C />
</SessionProvider>;
}在显示的前两个代码块中，我的数据返回得很好。现在我想把它传递给子组件(它们是功能组件)。但是，当我尝试将一个值传递给会话提供程序<SessionProvider value={sessId}时，该值返回为未定义。
我见过其他的例子，像{sessId.name}. However, if I'm just trying to make sessId`这样的值被直接传递到组件中，所有的子组件都可以使用。
回答 1
Stack Overflow用户
发布于 2020-09-25 16:05:50
sessId不存在
您得到的错误很可能是sessId不存在。
sessId存在于componentDidMount方法中，但不存在于您的render方法中。
就像在componentDidMount中一样，您需要使用this.context在render方法中创建该变量。
你不需要提供者
但是..。你不需要那里的提供者。当您向React.createContext提供初始值时，它将成为默认值，因此您只需随子对象一起使用它，数据就会出现在那里。
你不需要上下文
但是，如果只使用静态JSON，那么这里根本不需要上下文:只需将JSON文件导入到每个子文件中并在那里使用它即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64060028
复制相关文章
相似问题
腾讯云开发者
