时间戳

首页 > 解决方案 > 使用 State Hook 正确设置状态

javascript - 使用 State Hook 正确设置状态

问题描述

我目前正在学习 React 并试图了解如何在函数组件中正确更新状态。

我从 React 文档中的“状态和生命周期”部分了解到，如果它使用之前的状态，你应该更新状态，如下所示：

// Correct
this.setState((state, props) => ({
  counter: state.counter + 1
}));

代替

// Wrong
this.setState({
  counter: this.state.counter + 1,
});

因为 this.props 和 this.state 可能是异步更新的，所以你不应该依赖它们的值来计算下一个状态。（参考）

现在我想通过使用 State Hook 的功能组件来实现相同的功能useState。作为示例如何更新函数组件中的状态，React 文档具有以下代码片段：

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

这相当于类组件中的以下代码：

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Click me
</button>

但这不是“错误”的解决方案，因为它直接依赖于状态吗？

标签： javascriptreactjs

解决方案

您可以执行以下操作。

import React, { userState } from 'react';


function TestHook() {
const [count, setCount] = useState(0);

  function updateCount() {
    setCount(count + 1);
  }


return <button onClick={handleCount}>{count}</button>
}

在这里检查。https://codesandbox.io/s/one-with-the-hook-0yig1

您可以在我的 Medium 帖子中关注它（https://blog.usejournal.com/getting-started-with-react-hooks-f0b5c1e3e0e7）

推荐阅读