问题标签 [usecallback]

我有一个基于过滤器和偏移量（页面）更新的分页数据列表当偏移量更新（下一页/上一页）时，我点击 API 并获取新数据。当过滤器更新时，我将偏移量重置为 0。

问题是，当过滤器更新并更新偏移量时，它会导致 useEffect 被触发两次。依次调用 api 两次。

我有一个功能组件登录屏幕，其中有 4 个输入字段，以及一个登录按钮。这是我的组件屏幕的完整代码：

正如您通过查看代码所看到的那样。我Login的组件根据设备类型（手机或平板电脑、以下组件MobileContent或TabContent.

MobileContent功能组件将我的主要内容包装在 ScrollView 中，TabContent功能组件不需要滚动视图，但具有响应式缩放视图。

这两个父组件都显示了我的常用组件Header, LoginContent& Footer。

我的Header组件只显示标准标题和副标题。我的LoginContent组件中包含所有 TextInput 字段以及验证逻辑设置。我的Footer组件有提交/登录按钮。就这样。

所以我们可以将屏幕的组件树总结为：

登录屏幕/父组件 => 移动内容/选项卡内容 => 标题、登录内容和页脚（通用组件）

好的，那么现在有什么问题？对我来说，主要问题在于LoginContent组件中的 TextInputs，但我认为根本问题适用于整个登录屏幕组件。

问题：当我单击 TextInput 字段时，输入获得焦点并出现键盘。到目前为止一切都很好。只要我输入一个字母，就在键盘上按一个键。键盘立即关闭，文本输入失去焦点。

为什么会发生？我相信这可能是经典的“React Component Re-render”问题，当 TextInput 更新状态时，TextInput 会重新渲染onChangeText，因此它失去焦点，这就是键盘关闭的原因。

所以，我希望从这两个问题中至少解决第一个问题。

问题 1：当我尝试在任何 TextInput 字段中键入内容时，如何防止键盘不断关闭。

问题2 ：如何使用这两个 React HookuseCallback()和useMemo()

我已经多次阅读了这两个钩子的文档，但仍然没有掌握这些钩子的概念useCallback。useMemo所有发布的示例都处理使用 useCallback 或 useMemo 优化的 Counter Exmaple，但我没有在我的屏幕中使用 Counters。

我需要一个更实用的useCallback()& useMemo()in 屏幕组件示例。也许在我当前的登录屏幕组件中实现这两个钩子将帮助我更好地理解和掌握这个概念。

就像我提到的，解决问题 1 是我最优先考虑的问题，但我知道问题 2 的解决方案从长远来看也会对我有所帮助。如果您能在这里解决我的两个问题，那将非常有帮助。感谢您的帮助。

我有一个组件，我在其中使用useEffect并在内部调用一个函数fetchLatest()。fetchLatest()是一个动作，它发出网络请求以获取当年已发布的所有电影。我正在使用 Redux，在我的商店里我有一个state.movies.latest，每次我第一次启动应用程序时，最新的电影行都是准确的，没有重复的数据。当我渲染一个不同的组件并返回我的主组件时，我会fetchLatest得到重复的数据。

我发现我的问题是因为在我的减速器中我返回了类似...

其中payload是对象（电影）的数组。

所以我把减速机改成...

它现在可以工作，我没有得到重复的数据，但我担心我没有正确地做或理解这一点。如果我要使用 useEffect 并将我的 fetchLatest 函数放在我的 useEffect 挂钩中，并将其作为依赖项传递给我的理解，我的函数fetchLatest将在每个渲染周期后重新创建为一个全新的对象。由于我已经在商店中有我latest的电影数组，因此我不想每次都重新渲染一个全新的对象，从而导致在我的state.movies.latest重复数据中添加到我的商店中。我至少相信这就是它正在做的事情。

我决定也许我应该使用它来确保除非它的依赖关系发生变化，否则不会创建useCallback这个全新的对象。fetchLatest

所以我不确定的是，也许我可以拥有我现在拥有的更新的减速器，并且还使用回调来确保在我重新构建该组件时，每次都没有无限循环运行以将我的 fetchLatest 函数重新创建为新对象？

另外，我实际上可能不了解 useCallback 的作用，因为我在使用 useCallback 之前尝试过使用我最初拥有的减速器，并且据我所知，如果没有任何改变，那么为什么我的 fetchLatest 在我重建组件时运行。当我第一次安装我的组件时，我只想要我在商店中已经拥有的最新电影

我的这个组件的代码看起来像这样

我最初尝试做的是在我的 useEffect 中添加这个 useCallback 并调用 handleFetching 并将其作为依赖项传递。

但是，useCallback 与 useEffect 结合使用，同时仍然拥有我的减速器......

每次重建组件时仍然会运行。

我接受useSelector我需要的主题类型的状态，我在 settings.item.colorScheme.

我有一个BottomSheet允许我点击选择的语言来改变它，这个改变改变了reduxsosettings的状态useSelector。

问题是内部的状态useCallback不会改变，至少它只在bottomSheet菜单关闭然后重新打开时才会改变。

我怎么能在里面定义的里面useCallback看到更新的状态？

我试图将它作为参数传递给useCallback，但它不起作用。

代码：

我试图在useEffect. 在执行此操作时，我收到有关钩子中的 wrapfetchData函数的警告。useCallback那么，我应该在哪里声明useCallback函数，以及如何实现呢？

这是代码：

考虑我有这样的例子：

基本上我有一个名为的组件Hello，它接收两个道具firstName，lastName然后我需要fullName根据这两个道具进行计算，并有一个函数sayHello()用来fullName做某事

所以我的问题是：这里有必要使用useMemo()和useCallback()进行性能优化吗？这似乎是一种过度使用，useMemo()只是useCallback()为了一点好处，我不确定这是否会导致潜在的副作用？

我想eventListener在我的 React 组件中添加一个节点。我正在选择带有useRef钩子的节点。我是useCallback因为它useRef是null第一次渲染。

我的问题是我对裁判useEffect所做的任何更改都没有反应。offeringContainer意思是，offeringContainer.current是null。

这是我的 JSX：

我知道我做错了什么，但我的 useEffect 钩子应该监听来自offeringsContainer.current.

我有这个页面（屏幕）通过参数接收一个 ID 号，在这个屏幕中，我尝试从我的动作（减速器）文件中调用一个动作函数并获得一个 API 调用，我以为我没有得到任何信息来自该调用的数组，我认为问题出在调用中，但是我在操作函数的声明之后放置了一个控制台日志，但它没有打印，所以我认为它没有访问该函数，所以我相信问题在于通过调度调用该函数。

我什至尝试在 UseEfect 中放置一个断点，在那里我调用调用 Dispatch 函数的函数，但它从不中断我不确定错误在哪里，这是代码：

• 屏幕（我怀疑问题出在哪里）：

  ;

  styles = StyleSheet.create({ image: { width: '100%', height: 300, }, subtitle: { fontSize: 16, textAlign: 'justify', marginVertical: 20, fontWeight:'normal', }, 描述： { fontSize: 16, textAlign: 'center', marginVertical: 20, fontWeight: 'bold',

• 这是我的行动文件：

最后，这是我的 Redux Reducer 以防万一：

对不起格式，但给了我一些问题；任何想法我的问题是什么？

谢谢你。

这是一个很常见的场景，我们有一个包含大量数据的表。每行都有一个复选框，用于从选定行导出数据。

在 App.tsx 中，

在 Row.jsx 中，

以上是基本的代码结构。My problem is that when a row is selected/deselected, the app will be re-rendered since the state refreshed, that will cause callback instance refreshed as well, then all child Row will be re-rendered which I want to avoid because of performance问题。useCallback不适用于这种情况，因为它依赖于选择状态。

我知道我可以在子组件中实现shouldComponentUpdate，只是想知道是否可以从 root 解决问题？

感谢任何建议和新年快乐。

更新：将 parent 变成 React.Component 而不是函数组件可以解决问题，因为 setState 不会刷新回调实例。我认为这两种组件几乎相同，但显然它们是不同的。希望它可以帮助某人，但仍然想知道是否可以将其存档在功能组件中。

尝试根据宽度为滑块实现一些自定义滚动行为。它使用 useState 来跟踪滑块内的当前页面和总页面。这是我最终尝试编译它的代码，但它有一些意想不到的行为。

这里的问题是，当 currentPage 显示在 ui 中时，如果 else 在 handleScroll 函数中运行，它会重置回 1，这完全没问题，但它会导致返回到以前的值，而不是返回到 2 时到下一页。此外，由于我已将 isTimeoutLocked 添加为 useEffect 的依赖项，因为它要求它 setTimeout 将更频繁地运行，但我只想将它作为依赖项来获得正确的值，而不是这样 useEffect 每次运行时都会运行它改变。isTimeoutLocked 的目的是，当您通过更改当前日期来更改容器内的内容时，它没有注册一堆超时。