问题标签 [react-functional-component]

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 投票
2 回答
13504 浏览

reactjs - 更改值后反应组件未更新

在 ReactJS 中,我正在编写一个无状态组件;
因为我读过避免不必要的状态是最佳实践。

该组件表示当输入框包含值时执行功能的输入字段。

现在,我创建了另一个组件,它只是用于测试上述组件的示例。如下所示:

因此,我将 绑定value到组件中的自定义变量,当输入字段的内容发生更改时,该变量会更改。

为什么输入字段组件不使用新用户名更新自己?

亲切的问候,

0 投票
13 回答
234805 浏览

javascript - React - 如何强制功能组件呈现?

我有一个函数组件,我想强制它重新渲染。

我该怎么做?
由于没有实例this,我无法调用this.forceUpdate()

0 投票
1 回答
1488 浏览

reactjs - React 尝试在功能组件中调用子 (useRef) 函数

我有一个子组件正在生成和显示一个随机数。
我试图从父母那里控制它。
但参考电流为空。

如何从功能组件中的父级调用子函数
https://codesandbox.io/s/busy-joliot-85yom

谢谢

0 投票
1 回答
355 浏览

reactjs - 如何在拖动 React 组件的上下文中移除事件监听器

释放鼠标时,mousemove似乎没有正确删除。document

https://codesandbox.io/s/dragondrop-dqs46

0 投票
2 回答
584 浏览

reactjs - react-hooks 查询和 setState 导致 500 错误

我认为这可能是错误或配置错误。我收到此错误: networkError: ServerError: Response not successful: Received status code 500

第一次提交表单我会得到想要的结果,但是如果我再次点击提交按钮,我会收到上面的 networkError 消息。

但是,如果我在 catch 中删除setValu({texterror: {status: true, text: 'it be broke yo'}}),500 错误就会消失。我可以向提交按钮发送垃圾邮件,但不会收到 500 错误。

现在我不会在里面设置 setState 来避免这个问题,但我想知道这个问题是否有解决方案。

任何帮助,将不胜感激。先感谢您!

0 投票
1 回答
196 浏览

javascript - 如果我在大多数组件中使用对象破坏,它会使用更多内存吗?

假设我有这个组件,

我想知道,如果我对每个函数组件的每个方法以及传统组件的渲染方法都使用破坏方法,它会使用更多的内存还是会因为应用程序中有这么多的 const 或 let 变量而占用很少的负载。

有什么工具或什么东西可以测量这个东西吗?还是有人已经这样做了?我想了解它实际上是如何工作的。

0 投票
1 回答
485 浏览

javascript - 使用数组反应钩子 useState 导致缺少渲染调用

我有以下代码:

当鼠标回调调用几次时,我遇到了一个问题:状态参数更改正常(使用反应组件检查 Chrome Web 浏览器中的选项卡),但是具有此状态的 DOM 元素并未全部重新呈现 - 其中一些具有旧状态。

当我添加虚拟状态时 - 一切都很完美:

我如何改进我的代码并以正确的方式解决我的问题?

0 投票
4 回答
5387 浏览

reactjs - How to clear the value of an input field in a functional component without using state?

I have an input field and I handle the input via onKeyUp (as I need to access event.which). This works great so far as I just grab the content of the input via event.target.value but I run into issues when I try to reset the value of the input field.

I'm using functional components, so accessing the input via refs isn't possible and all examples I found with useRef just show how to focus the input field but not how to clear it.

I forgot to mention that I'm using Material-UI.

0 投票
1 回答
2076 浏览

reactjs - React 功能组件状态变化不会触发子组件重新读取其 props

我有这个 React 功能组件。我们知道,从 v16.8 开始,功能组件具有某种“状态”。它使用 useEffect 来“setState”来声明变量products。然后我将产品作为子组件 *ProductGrid 的道具传递。我将 ProductOfCategory 作为父组件,它将从 URL 获取数据并将结果设置为状态变量“产品”。我希望子组件 ProductGrid 能够读取该数据(更改),所以我使它看起来像这样。

家长:

孩子:

结果:当父组件中的数据发生变化时,我可以(在控制台中)看到子组件(ProductGrid)也被重新渲染,但它的属性变量“products”不是。它始终是一个空数组。这是什么原因?这是否意味着功能组件的状态与遗留状态不同?有什么办法可以克服这个吗?

非常感谢。

0 投票
0 回答
30 浏览

arrays - 数组作为状态:状态更新使用钩子重新渲染功能组件中的所有子项

我正在使用 array.map 函数呈现大量单词。根据用户输入,我更改单个数组元素(一次只更改一个)。

在返回部分:

我遇到了性能问题,因为整个单词列表在状态变化时重新呈现(每次击键都会发生),即使它一次只有一个元素并且索引(我用作键)没有改变。如果您更新由数组组成的状态,这是默认行为吗?如果是这样,你将如何实现一个状态数组(每个单词都是它自己的状态),所以你一次只更新一个状态,因此只重新渲染连接到状态的单个孩子(或者我错过/误解了什么)?