问题标签 [react-functional-component]

我正在尝试从数据库中获取数据。这是一个获取请求。只要我在异步函数中使用获取的数据，一切正常。但除此之外，它只返回“未定义”。我究竟做错了什么？谢谢你的帮助 ：）

我有一个纯粹用功能组件构建的反应应用程序。我想在屏幕上呈现元素后获取元素的高度，以相应地更改其父级的大小。

有基于类的应用程序的解决方案，但我找不到任何功能组件。

我从答案中尝试了这个解决方案，但它没有运行 useEffect 钩子

这是从我的组件中提取的代码

PS：接受的答案不适用于我的答案，但它适用于他在答案中添加的项目，所以我猜我的项目结构有问题或不完全确定。

非常感谢您的回答

I am using React functional components alongside React.memo, but I am experiencing an issue, which in my opinion derives from JavaScript closures. (I am also using Immer for immutability, but I believe it does not affect the situation.)

Below is a simplified version of the situation:

I am using React.memo to avoid unnecessary rerenders of the ChildComponents whose value didn't change, but this way the ChildComponent is storing an old version of the onChange function, which (in my understanding due to JavaScript closures) references an old version of the data.

The result of this is that when I change initially the value of the first ChildComponent and then the value of another ChildComponent, the value of the first ChildComponent is restored to the initial value.

A reproduction of the situation can be found in this sandbox.

After searching the web, a solution that I found to this issue is to use a ref inside the onChange function, to get the up-to-date data, like this:

A sandbox with this solution can be found here.

This solves the issue. But I wanted to ask, is this a correct solution? Or am I using React and React Hooks the wrong way?

我正在使用以下组件：

我正在尝试使用 AJAX 发出获取 API 请求。找不到合适的方法来使用功能组件。我通过 componentDidMount() 生命周期方法使用类组件实现了它。

我只希望在单击生成笑话（单击此处获取笑声）按钮后显示数据，但是一旦页面加载就会检索它。我该如何阻止这个？

这是一种很好的编码方式吗？我应该使用不同的函数，例如 componentDidMount 吗？

使用类组件时，始终建议不要执行内联匿名函数，因为它不利于性能，即

您通常必须在渲染方法之外创建一个名为 handleChange 的函数。这意味着每次渲染都不会创建新的内联匿名函数。

这让我想到了功能组件和 useState 等。

功能组件是渲染，所以如果我这样做

这与创建函数相同，因为无论如何每次都会创建函数 - 在函数组件中

我知道它可以使用 useCallback 钩子来缓存函数，但它也建议不要过度使用它们，因为反应速度很快，使用 useCallback 实际上对于简单的情况是不好的。

所以，这让我回到了我原来的问题。

在功能组件内部我们应该使用内联匿名函数吗？考虑到在函数组件中创建函数无论如何都会创建。

我认为无论如何都是垃圾收集

有人知道推荐的方法吗？

提前致谢

在我的 React 应用程序中，我正在使用功能组件开发一个屏幕。我想用模拟数据填充屏幕上的数据，直到我的 API 准备好。我基本上有一个打开状态的手风琴，我想在其中显示名称。现在，我正在硬编码名称来填充它。稍后，我将替换为来自 Store 的实际数据。所以要做到这一点，我在我的组件本身中定义如下的硬编码数据，因为在 API 准备好之后，我的道具将拥有所有必需的数据。

这引发了我的错误。我想了解我是否正确执行此操作，因为我需要读取 div 中的数据值。

如何检查功能组件何时更新和/或重新呈现？

在一个类组件中，我可以使用componentWillUpdate一个console.log消息。我将在哪里放置console.log功能组件以获得相同的控制台输出？

我看到两个地方，组件的函数体，我会把它放在开头。
在 jsx 内部。那些会给我同样的结果吗？

我在问，因为我无法React.memo上班，我想知道我是否测试了错误的东西。

使用功能组件，我想到达我按下的目标元素，因此交互/更改它的值。现在我正在这样做（以样式参数为例），它可以工作。

但是......如果我有更多不同的元素，我怎么能以更动态的方式做到这一点？

I have the following react class component to call an API every 10 seconds. Its works with no issues.

I am trying covert this to a react functional component. This is my attempt so far.

Please can someone help me complete the example? Is useEffect the correct usage or is there a better option?

Any help would be appreciated