为什么我的状态在Nextjs中没有改变？
我试图在nextjs应用程序中使用easy来进行全局状态管理，并且遇到了一些问题，在这些问题中，状态只在更改页面时才会更新。我想我可能不太明白我在做什么，所以我决定尝试一个快速启动指南的应用程序：https://easy-peasy.vercel.app/docs/tutorials/quick-start.html
当我单击按钮时，设置所有这些都不会发生任何事情。如果我在代码中做了一个更改并保存它，那么当它重新加载时，所有的更改都会发生。
有谁知道这是为什么，我是怎么解决的吗？我想可能是nextjs，但我只是用react进行了测试，这也不起作用。我一定是对这件事应该如何运作缺乏一些了解。在一篇教程中，我遵循了它的工作原理，而克隆也很有效。我不知道当我尝试用相同的代码创建自己的项目时，这就是为什么它没有立即更新的原因。
编辑:我不知道为什么我不只是分享回购。这里是：https://github.com/Kyle-Kroger/easy-peasy-broken
编辑2:我试着让Traversy的简易教程为v5更新内容，这也是一样的。单击时没有任何更新，但是如果我编辑代码，它将在重新加载时更新状态。我明天早上要在另一台电脑上试用。https://github.com/Kyle-Kroger/traversy-media-easy-peasy-broken
编辑3:我想我可能已经搞清楚了。我想知道这是否与react 18版本有关。这是我克隆的回购和我的唯一不同之处。我们将看到如何在旧版本中使用，并看看这是否有效。
编辑4:嗯，经过许多小时后，我解决了这个问题。在反应版本18打破了一些如何容易-农民的工作。回到17岁，一切都会好起来的。
这是我所有的代码：
//store.js
import { createStore, action } from "easy-peasy";
export const store = createStore({
todos: [],
addTodo: action((state, payload) => {
state.todos.push({ text: payload, done: false });
}),
});//body.js
import { useStoreState } from "easy-peasy";
const Body = () => {
const todos = useStoreState((state) => state.todos);
return (
<>
<p onClick={() => console.log(todos)}>Some more text to click</p>
<ul>
{todos.map((todo) => (
<li key={todo.text}>{todo.text}</li>
))}
</ul>
</>
);
};
export default Body;//title.js
import { useStoreActions } from "easy-peasy";
import { useState } from "react";
const Title = () => {
const addTodo = useStoreActions((actions) => actions.addTodo);
const [value, setValue] = useState("");
return (
<>
<input onChange={(e) => setValue(e.target.value)} value={value} />
<button onClick={() => addTodo(value)}>Add Todo</button>
</>
);
};
export default Title;_app.js
import "../styles/globals.css";
import { StoreProvider } from "easy-peasy";
import { store } from "../lib/store";
function MyApp({ Component, pageProps }) {
return (
<StoreProvider store={store}>
<Component {...pageProps} />
</StoreProvider>
);
}
export default MyApp;//index.js
import Body from "../components/body";
import Title from "../components/title";
export default function Home() {
return (
<div>
<Title></Title>
<Body></Body>
</div>
);
}回答 2
Stack Overflow用户
发布于 2022-07-08 20:30:34
移除
<React.StrictMode></React.StrictMode>在React 18上修复这个问题，不是一个真正的解决方案，而是一个解决办法，直到有人修复它。
Stack Overflow用户
发布于 2022-05-20 13:48:40
我在更新的时候也遇到了麻烦。有趣的是，我将StoreProvider从index.js更改为app.js，它起作用了。
https://stackoverflow.com/questions/71934003
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号