问题标签 [use-state]

React 钩子useState用于设置组件状态。但是如何使用钩子来替换回调，如下面的代码：

我想在状态更新后做点什么。

我知道我可以useEffect用来做额外的事情，但我必须检查状态先前的值，这需要一些代码。我正在寻找一个可以与useState钩子一起使用的简单解决方案。

我是反应 Hooks 的新手。我试图useState在我的代码中使用。当我使用它时，我发现了一个术语“惰性初始状态”

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

但是我想不出这种懒惰初始化状态会有用的用例。

就像说我的 DOM 正在渲染并且它需要该state值，但我useState还没有初始化它！并且说如果你已经渲染了 DOM 并且someExpensiveComputation已经完成，DOM 将重新渲染！

为什么我无法从定义它的组件内部访问更新的recipes( ) 值？useState

在此示例中，您可以看到一旦删除对我用来更新状态的函数的引用，无法访问此值会导致应用程序出错

=> 代码框和代码如下

*点击两次<h1>查看错误

https://codesandbox.io/s/sparkling-sea-5iqgo?fontsize=14&hidenavigation=1&theme=dark

我不明白为什么如果我返回[recipes, setRecipes]存储recipes.setBookmarks对函数的引用的位置，它就不起作用

但是如果我返回函数本身（这也是一个参考），[recipes, setBookmarks]那么它就可以工作

查看其他可以正常工作的代码框

https://codesandbox.io/s/red-violet-gju99?fontsize=14&hidenavigation=1&theme=dark

我有一个名为SignUp它的功能组件，它使用 google recaptcha 来保护注册表单。

Signup创建一个指向Recaptcha组件的 ref 并声明一个onResolved指向函数方法的回调函数onRecaptchaResolved

问题是当onRecaptchaResolved在 Recaptcha 执行后被调用时，我们输入的值不是最新状态，而是useState 在我们的例子中设置的初始值"hi"

如何确保读入的输入值onRecaptchaResolved是更新后的值？

我正在学习 ReactJS 并尝试使用子组件中成分的更新状态来更新父道具。调用 setUserIngredients 并将更新的成分传递给父级。

代码 ：

我从数据库中随机获取了 5 张照片（gif）。我已经声明了pressedGif，它定义了点击的照片的索引。我想为它们中的每一个添加 onclick 事件（在 for 循环中）：

我在控制台中成功收到了 HELLO 消息，但问题是我随机挑选的照片也会变成不同的照片。那么如何防止照片重新加载和调用随机选择照片的函数呢？

如何在不使用左右箭头的情况下使我的轮播自动滑动。左右方法已经开始工作了。

这是我到目前为止的代码：

我在我的 React 功能组件中动态添加卡片。卡片存储在状态中。我映射它们并给它们每个ID。OnClick 那些卡片我成功地得到了他们的 id。现在我想用 getElementById 来改变卡片颜色：

我尝试学习参考，但它们仅适用于类组件。那么如何在 React 中通过 id 访问我的元素呢？

当我在文本输入框中键入一个键时，我可以在 react devtools 中看到 useState 挂钩的状态已更新为包含该键，但输入中显示的文本不会改变。为什么会这样，我该如何解决？
我有一组值，我希望用户能够在输入控件中进行编辑。

我正在制作一个游戏，我需要不同风格的选定（按下）项目。如果单击该 div，我正在尝试将“选定”类附加到 div。换句话说，我有一个状态：

什么时候

那么我应该将“选定”类附加到我的 div 中。这是我的简化代码：

我看不到根据状态更新的类：（它保持为空）

但是我在控制台中获得了更新的状态（我在 useEffect 中打印它）：

我的目标：

1）点击改变状态（pressedGifId）

2) 如果pressedGifId 与当前映射的项目id ( gif${item[0]})匹配，则将“selected”类添加到div

更新2：

提供的解决方案对我不起作用，因为我的照片卡是随机挑选的照片，并且提供的解决方案照片在每次点击时都会变成新的随机挑选的照片（我不想这样）。但这让我得到了正确的答案：

我将 photoCards 置于一个状态（钩子）并将其设置为第一次加载（当 photoCards 数组长度为 0 时）。它阻止重新加载并且类工作。

这是更新的代码：