为什么在快速开始时,我的状态不在nextj中发生变化?

发布于 01-23 01:04 字数 2991 浏览 2 评论 0原文

我试图在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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

迷你仙2025-01-30 01:04:16

从index.js中删除

   <React.StrictMode></React.StrictMode>

将问题修复在React 18上。
不是真正的解决方案,而是解决方案,直到有人修复它。

Removing

   <React.StrictMode></React.StrictMode>

from index.js fixes the issue on React 18.
Not a real solution but a workaround till Someone fixes it.

我也只是我2025-01-30 01:04:16

我在更新方面也遇到了麻烦。有趣的是,我将StoreProviderindex.js更改为app.js,并且有效。

I was also having trouble with the update. Interestingly, I changed the StoreProvider from index.js to app.js and it works.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文