为什么在快速开始时,我的状态不在nextj中发生变化?
我试图在NextJS应用程序中使用Easy Peasy进行全球状态管理,并遇到问题,只有在我更改页面时,该州才会更新。我以为也许我没有完全掌握自己在做什么,所以我决定使用快速启动指南尝试快速应用: https://easy-peasy.vercel.app/docs/tutorials/quick-start.html
当我单击按钮时,设置所有这些都不会发生。如果我在代码中进行更改并保存它,那么当它加热加载时,所有更改都会发生。
有人知道为什么这是什么以及我如何修复它?我认为这可能是NextJ,但我只是用React测试了它,这也无法正常工作。我必须错过对应该如何工作的理解。在一个教程中,我遵循的工作正常,克隆也有效。我不知道何时尝试使用相同的代码创建自己的项目,为什么它不会立即更新。
编辑:我不知道为什么我不只是共享回购。在这里是: https://github.com/kyle-kroger/kyle-kroger/easy-peasy-peasy-peasy-peasy-peasy-peasy-peasy-peasy-peasy-损坏
编辑2:我试图让Traversy Media简单的简单教程来更新V5的内容,并且可以做同样的事情。单击时没有任何更新,但是如果我编辑代码,它将在重新加载上更新状态。我将在早上尝试一台计算机。 https://github.com/Kyle-Kroger/traversy-media-简单的破裂
编辑3:我想我可能已经弄清楚了。我想知道这是否与React版本第18版有关。这是我克隆起来和我的回购之间唯一有所不同的东西。将查看如何使用较旧版本使用Create-React-App,并查看是否有效。
编辑4:好几个小时后,我弄清楚了这个问题。 React第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>
);
}
I was trying to use easy peasy for global state management within a nextjs app and was running into problems where the state would only update when I changed pages. I thought maybe I didn't quite grasp what I was doing so I decided to try a quick app with the quick start guide: https://easy-peasy.vercel.app/docs/tutorials/quick-start.html
Setting all this up nothing is happening when I click the button. If I make a change within the code and save it then all the changes happen when it hot reloads.
Does anyone have any idea why this is and how I fix it? I thought it might be nextjs but I just tested it with react and that's not working either. I must be missing some understanding of how this is supposed to work. In a tutorial I was following it worked just fine and cloning it also works. I have no idea when I try and create my own project with the same code its why it's not updating right away.
edit: I don't know why I didn't just share the repo. Here it is: https://github.com/Kyle-Kroger/easy-peasy-broken
edit 2: I tried to get Traversy Media's easy-peasy tutorial to work updating things for v5 and that does the same thing. Nothing updates when clicked but if I edit the code it will update the state on reload. I'm going to try on another computer in the morning.
https://github.com/Kyle-Kroger/traversy-media-easy-peasy-broken
edit 3: I think I might have figured it out. I wonder if it has something to do with version 18 of react. That is the only thing that is different between the repo I cloned that works and mine. Going to see how to use create-react-app with an older version and see if that will work.
edit 4: Well after many hours I figured out the problem. Something in react version 18 broke something with how easy-peasy works. Going back to 17 makes things work.
Here is all my code:
//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>
);
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

从index.js中删除
将问题修复在React 18上。
不是真正的解决方案,而是解决方案,直到有人修复它。
Removing
from index.js fixes the issue on React 18.
Not a real solution but a workaround till Someone fixes it.