问题标签 [react-hooks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
21 回答
343363 浏览

javascript - 如何在 React Hooks 中使用 componentWillMount()?

在 React 的官方文档中它提到 -

如果熟悉 React 类生命周期方法,可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

我的问题是 - 我们如何componentWillMount()在挂钩中使用生命周期方法?

0 投票
1 回答
1430 浏览

javascript - 使用嵌套字段/对象时,使用 React setState 挂钩更新后状态消失

在下面的示例中,当我更新某个字段时,我的状态对象中的另一个字段消失/未设置,并且我收到有关输入变得不受控制的警告。下面的例子:

0 投票
5 回答
58234 浏览

javascript - 未捕获的错误:渲染的钩子少于预期。这可能是由 React Hooks 中意外的提前返回语句引起的

给定以下组件,当我按下年龄选择器并将值更改为 15,这样我呈现一个没有驾驶执照字段的表单时,我收到错误:

下面的示例代码:

0 投票
0 回答
716 浏览

javascript - Async React - React Suspense - 组件有时会渲染两次

我正在尝试新的反应功能,如useEffect钩子、懒惰/悬念,react-cache但我对使用感到困惑。

我创建了一个代码框,您必须能够在单击时看到多个按钮标签的变化;

https://codesandbox.io/s/m4r69wm6z8

沙箱显示一个按钮,它应该在单击时从后端获取按钮标签。我通过实现unstable_createResource一个围绕 setTimeout 的承诺来模拟这一点。

它有时只发生在沙盒中。但是在我的项目中,有很多这样的按钮,并且几乎一直重复渲染。

复制错误

0 投票
1 回答
4067 浏览

reactjs - React Hooks:“useMutationEffect”和“useLayoutEffect”有什么区别?

useMutationEffectuseLayoutEffect在用法上有什么区别?

我已在线阅读所有可用材料,包括(但不限于)

  1. 挂钩参考
  2. 肯特的博客文章

useEffect和其他两个钩子之间的区别很明显。useMutationEffect但是和之间的区别useLayoutEffect仍然不清楚。

我知道执行顺序是:

  1. 使用MutationEffect
  2. 使用布局效果
  3. 使用效果
0 投票
4 回答
4356 浏览

reactjs - getSnapshotBeforeUpdate 使用反应钩子

如何实现 getSnapshotBeforeUpdate 使用反应钩子为我提供的相同逻辑?

0 投票
1 回答
1161 浏览

reactjs - 在 React Effect Hook 中使用箭头函数是否有任何性能问题?

React 在他们最新的提案中引入了 Hooks。Effect Hook 接受一个函数和一个数组,如下所示:

React 是有意使用箭头函数的。这意味着每次调用 Effect Hook 时都会创建一个新函数。

考虑到一个组件可以有许多效果挂钩这一事实,这对性能有什么影响吗?

在此处输入图像描述

0 投票
9 回答
150575 浏览

javascript - 从组件中的 useState 多次调用状态更新程序会导致多次重新渲染

我第一次尝试 React 钩子,一切似乎都很好,直到我意识到当我获取数据并更新两个不同的状态变量(数据和加载标志)时,我的组件(数据表)被渲染了两次,即使两个调用状态更新程序发生在同一个函数中。这是我的 api 函数,它将两个变量都返回给我的组件。

在一个普通的类组件中,您将进行一次调用来更新可能是一个复杂对象的状态,但“挂钩方式”似乎是将状态拆分为更小的单元,其副作用似乎是多个重新当它们单独更新时呈现。任何想法如何减轻这种情况?

0 投票
8 回答
23173 浏览

javascript - How can I make React Portal work with React Hook?

I have this specific need to listen to a custom event in the browser and from there, I have a button that will open a popup window. I'm currently using React Portal to open this other window (PopupWindow), but when I use hooks inside it doesn't work - but works if I use classes. By working I mean, when the window opens, both shows the div below it but the one with hooks erases it when the data from the event refreshes. To test, leave the window open for at least 5 seconds.

I have an example in a CodeSandbox, but I'm also post here in case the website is down or something:

https://codesandbox.io/s/k20poxz2j7

The code below won't run because I don't know how to make react hooks work via react cdn but you can test it with the link above by now

0 投票
1 回答
13360 浏览

reactjs - 反应钩子和打字稿-“从不”类型上不存在属性“***”

我从很多角度都遇到过这个问题,目前我的代码看起来像这样,我收到以下错误:

“从不”类型上不存在属性“相册”

我正在使用 React 钩子,但从data使用useState. data有一个albums我不确定如何定义或在哪里执行此操作的属性。