Next.js + React Context.没有超过默认值?

Question

我有一个看起来像这样的上下文:

const peopleContextDefaultValue = {
name: null,
age: null,
setName: null,
setAge: null,
};
...
const [name, setNameState] = useState();
const [age, setAgeState] = useState();
const setName = (payload) => {
setNameState(payload);
};
const setAge = (payload) => {
setAgeState(payload);
};
const value = {
name,
age,
setName,
setAge,
};
return (
<>
<PeopleContext.Provider value={value}>
{children}
</PeopleContext.Provider>
</>
);

我想设置一些默认值我的.env，应用程序加载后的第一次。我把useEffect放到_app.js:

function MyApp({ Component, pageProps }: AppProps) {
const { setName, setAge } =
usePeople();
useEffect(() => {
const effect = async () => {
const name = process.env.NEXT_PUBLIC_NAME;
const age = process.env.NEXT_PUBLIC_AGE;
if (name) {
setName(name)
);

if (age) {
setAge(age)
}
};
effect();
}, []);
return (
<PeopleProvider>
<Navbar />
<Component {...pageProps} />
</PeopleProvider>
);
}
export default MyApp;

但是，我一直得到这个错误:

setName is not a function

问题似乎是setName与peopleContextDefaultValue的默认值保持一致，但我不明白为什么。有人明白吗?任何想法如何解决/处理这一点?

提前感谢你的任何帮助!!

Answer 1

Provider应该位于使用其上下文的任何组件的最高级别，您正在访问上下文状态，因此您也需要将<MyApp />包装在其中:

// For a normal React app, but won't work for Nextjs
<PeopleProvider>
<MyApp />
</PeopleProvider>

在Nextjs的情况下，最高级别的组件是_app.js文件，所以上面将不起作用，因为没有任何比_app.js更高级别的组件。

所以我建议将您当前的逻辑从_app.js文件移动到index.js文件，同时保留提供程序代码，并且您现有的代码应该可以工作，否则，您可以看看这个答案。