反应打字的USESESTATE HONK不使用“ SetState”更新方法

发布于 01-23 14:41 字数 982 浏览 1 评论 0原文

我正在编码React应用程序,并在国家管理方面存在问题。

我添加了一个状态“头条新闻”,该状态是一个布伦,默认情况下是false。 另外,我有一个更新此状态的回调方法。

当执行回调值时,我的状态不会更改。

我实现了一个使用效果hool,它在“ window.alert”中显示了我的状态的变化,在此挂钩中,我看到我的状态正在发生变化。

但是在那之后,我的状态直接返回误。

function App() {
  
  const [headlineState, setHeadlineState] = useState<boolean>(false);
  
  useEffect(() =>  {
     window.alert("HS changed" + headlineState)
  }, [headlineState]);

  const moveHeadline = (value:boolean) => {
    setHeadlineState(value);
  }

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <div className="headerDiv">
          <Header isOnSubpage={headlineState} backBtnClick={() => { moveHeadline(false) }}/>
        </div>
        <div className="contentPageDiv">
          <ContentPage />
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

I am coding a React application and have a problem with the state management.

I added a State "headlineState" which is a boolen which is by default false.
Also i have a Callback Method which updates this state.

When the Callback value gets executed, my state doesnt Change.

I implemented a useEffect hool which displays the changes of my state in an "window.alert", and in this hook i see that my state is changing.

But after that, my state returns directly back to false.

function App() {
  
  const [headlineState, setHeadlineState] = useState<boolean>(false);
  
  useEffect(() =>  {
     window.alert("HS changed" + headlineState)
  }, [headlineState]);

  const moveHeadline = (value:boolean) => {
    setHeadlineState(value);
  }

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <div className="headerDiv">
          <Header isOnSubpage={headlineState} backBtnClick={() => { moveHeadline(false) }}/>
        </div>
        <div className="contentPageDiv">
          <ContentPage />
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

那片花海2025-01-30 14:41:30

我不确定您要实现什么,但是如果搜索解决方案将状态设置为相对,则可以这样更新您的功能

<Header isOnSubpage={headlineState} backBtnClick={() => {moveHeadline(!headlineState)}}/>

I am not sure what you want to achieve but in case of searching solution to set state to opposite one, you can update your function like this

<Header isOnSubpage={headlineState} backBtnClick={() => {moveHeadline(!headlineState)}}/>
节枝2025-01-30 14:41:30

“状态直接返回到false”,因为您将其设置为moveheadline(false)中的设置。

The "state returns directly back to false" because you set it like so in moveHeadline(false).

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