我在nextjs应用上设置ContextAPI时遇到问题。我收到此错误：
TypeError: Cannot read properties of undefined (reading 'Provider')我是这样创造情境的：
import React, { createContext, useState } from 'react';
const { PropContext } = createContext();
export default PropContext;
export const PropContextProvider = ({ children }) => {
const [username, setUsername] = useState([])
let contextData = {
username: username,
setUsername: setUsername
}
return(
<PropContext.Provider value={contextData} >
{ children }
</PropContext.Provider>
)
}以及index.js中的：
export default function Home() {
const [steps, setSteps] = useState(1);
return (
<>
<PropContextProvider/>
<div className="homeBackGround">
<div className={styles.container}>
<Head>
<title>Interactive World!</title>
</Head>
....
<PropContextProvider/>
</>
)
}
1条答案
按热度按时间zaqlnxep1#
我认为
React.createContext实际上返回了你所需要的上下文，你不需要对返回的对象进行反结构化。您可以简单地执行以下操作：
如果您感兴趣，可以在这里阅读更多：
https://reactjs.org/docs/context.html#reactcreatecontext
此外，您需要将第一个
<PropContextProvider/>更改为<PropContextProvider>，使其成为一个开放元素（而不是自封闭元素），然后您可以期望您的子消费者能够访问上下文的值。