React组件使用onClick无休止地重新呈现
是由于在onClick事件处理函数中触发了组件的重新渲染，而该事件处理函数又会导致组件状态的改变，从而再次触发重新渲染，形成了一个无限循环的情况。
要解决这个问题，可以采取以下几种方式：
- 确保onClick事件处理函数中不会导致组件状态的改变：在事件处理函数中避免调用会导致组件重新渲染的方法或操作，例如setState等。
- 使用条件判断来控制重新渲染：在组件的render方法中，可以通过条件判断来控制是否重新渲染组件。例如，可以使用一个状态变量来标识是否需要重新渲染，然后在onClick事件处理函数中修改该状态变量，从而控制重新渲染的发生。
- 使用shouldComponentUpdate生命周期方法：可以在组件中重写shouldComponentUpdate方法，通过判断前后状态的变化来决定是否重新渲染组件。在onClick事件处理函数中，可以通过修改组件状态来触发shouldComponentUpdate方法的调用，从而控制重新渲染的发生。
- 使用React.memo进行组件的优化：React.memo是一个高阶组件，可以用于包装函数组件，用于优化组件的性能。通过使用React.memo，可以避免在组件的重新渲染中不必要的计算和渲染。
总结起来，解决React组件使用onClick无休止地重新呈现的问题，关键是避免在事件处理函数中导致组件状态的改变，或者通过条件判断、生命周期方法、React.memo等方式来控制重新渲染的发生。
相关·内容
我希望result.js中的按钮的onClick事件呈现我的微调器组件，并且到目前为止(某种程度上)已经让它这样做了。目前，Spinner主要有一些console.log()语句，并且它会记录“呈现的spinner”。无休止地点击按钮后，大约每秒一次。根据记录，返回的段落没有显示，但我还没有抽出时间进行调试。result.js：import { connect }
浏览 5提问于2018-07-06得票数 0
3回答
count])
alert('pressed') <button onClick={onIncreaseClick}>Increase</button> </>);我希望onPress变量始终包含相同的链接我希望我的
浏览 5提问于2021-01-17得票数 1
回答已采纳
我试图在不使用任何生命周期方法的情况下直接更新返回中的状态，并得到如下错误：
上面的错误我参考了，但是我没有得到一个合适的解决方案。是否总是需要使用函数或生命周期方法来更新状态？import React, { Component } from "react
浏览 1提问于2019-05-20得票数 0
3回答
我希望只对已更改的呈现项作出反应。我试着用“反应备忘录”和“实用程序”，但没有用。我不明白原因是什么。解决这个问题的方法是什么？谢谢。App.tsimport "./styles.css"; /> </div>}
Item
浏览 9提问于2022-09-09得票数 2
回答已采纳
我正在使用react js在地图上显示位置。并从json文件中获取坐标。我设置了一个按钮来选择each.then，当坐标被选中时，我必须重新渲染才能显示我刚刚获得的新信息。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环
state
浏览 51提问于2020-02-04得票数 2
我有一段代码 render() { return <h1>Hi</h1>}
当单击'Hi‘msg时，只有Container组件保持重新呈现，但
浏览 3提问于2017-11-30得票数 10
回答已采纳
每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。import React from "react";
console.log("I am rendering multipleon each update");
};
export default function Ap
浏览 3提问于2020-06-12得票数 1
2回答
import React, { useState, useEffect } from 'react';
const [ count, setCount] = useState(0);
<div>
<button onClick={() => setCount(count + 1)}如何防止重新渲染？ 谢谢。
浏览 11提问于2019-12-19得票数 0
有没有可能在不使用像onClick这样的函数的情况下在react中重新加载组件。我想让我的组件在刚刚加载后重新加载。我尝试在构造函数中使用window.location.reload(false);。我甚至尝试过使用useEffect()，但它们会使页面无限地重新加载。 附近有什么工作吗？
浏览 20提问于2020-01-25得票数 1
最近，我一直在考虑如何回忆录一些基于的功能组件的子组件。这些子组件可能/可能不使用来自主组件的一些道具。={onClick}>increment a</button> )我了解到，随着状态a和b在App中的更新，它需要重新呈现，这反过来又必须重新呈现依赖于a和b的MainComponent有两个问题：
当interval更
浏览 12提问于2021-01-30得票数 5
回答已采纳
为什么使用自定义钩子来呈现组件会重新呈现App组件。如果我切换<Comp> or <AnotherComp>，则整个应用程序组件将为另一个组件重新呈现相同的内容。我尝试了React.memo并在App component中再次包装了该组件，但没有任何效果。 我读到它的方式react比较和对待功能不同的渲染。但是，有没有人们为此使用<
浏览 11提问于2020-04-30得票数 0
1回答
我在我的应用程序中使用了功能组件，最初它有一个包含大量代码的组件，为了能够更好地组织代码并具有可重用的组件，我将其分为3部分，第一部分包含一个<MaterialTable>，第二部分包含<dialog在表所在的组件中导入<dialog>，在<dialog>组件中导入<form>，这样窗体就在对话框和我想要发送它的对话框中调用。问题是，当在操作中添加组件时，我得到以下错误 Expected an as
浏览 24提问于2019-12-31得票数 0
回答已采纳
1回答
我正在使用react，无法在gatsby中找到如何有条件地呈现这个示例。主要目标是每次更改值时都重新呈现子组件，但我不想只重呈现所有网站的子组件。import * as React from "react" let i=1; const Test = () => { &
浏览 5提问于2022-01-19得票数 1
回答已采纳
React.memo和useMemo钩子都允许通过减少重新计算和重命名来优化性能。更重要的是，useMemo通常从父组件调用到子组件，而React.memo通常在子组件本身的声明中被调用。
虽然两者都有不同的优势，但React.memo的一个优点是，不必从每个父级调用到子级关系。然而，随着钩子的释放，显然，React开发希望转向使用钩子来处理状态、副作用事件和其他影响的功能组件。虽然我不认为会有勇气或无视他们的用户群
浏览 1提问于2020-04-18得票数 3
他直接突变状态，然后使用状态中的更新值用setState更新状态，从而启用重呈现并防止直接突变通常会导致的所有问题：this.setState关于这种情况的一个更完整的示例将向您展示他的代码确实有效： constructor() { }
r
浏览 3提问于2021-02-15得票数 0
我希望将数据从一个功能组件传递到另一个功能组件。但是，我不想呈现子组件。我只想把数据从一个组件传递到另一个组件。我怎样才能做到这一点？一定有办法这样做的。
浏览 6提问于2022-09-14得票数 0
This is the gif of re-rendering 当我在选择一个视频后滑动范围滑块时，整个页面都会重新渲染，如何避免这个问题？如何避免不必要的组件重新渲染？我正在使用react钩子。我正在使用React Dropzone使用拖放facility.The setVideo状态被传递到ReactDropZone组件。我不明白为什么会发生这种情况 这里的代码是 import React, { useEffe
浏览 23提问于2020-12-09得票数 0
在下面的中，我们有一个<Child />组件，它可以在<div />中呈现，也可以不呈现，具体取决于状态。</div> <Child n={n} /> })} );如您所见，<Child />组件正在使用来防止重新呈现但是，当<
浏览 3提问于2021-10-23得票数 1
回答已采纳
我现在才注意到这一点，但由于某些原因，我似乎无法在使用React和NextJS构建的页面中的某些输入字段中键入内容。这只发生在移动设备上，在桌面上，表单工作得很好。 然而，奇怪的是。我可以很好地输入密码，这只在其他输入类型(如type="text"和type="email")上发生。 仍然可以使用键盘预测在文本框中键入内容，但不能使用普通键盘。text-center"} dangerouslySetInnerHTML={createMarkup(props
浏览 11提问于2019-10-14得票数 0
回答已采纳
1回答
我正在创建一个简单的倒计时应用程序React，我很难理解setInterval是如何工作的，同时React重新呈现组件。<button onClick={props.onPause}> Pause </button> )
但是，当我简单地更改时，定
浏览 16提问于2022-10-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
