从子对象设置父状态(object)会导致不断地重新渲染
从子对象设置父状态(object)会导致不断地重新渲染。这是因为在React中，当父组件的状态发生变化时，所有依赖于该状态的子组件都会重新渲染。如果子组件在其内部设置了父组件的状态，那么每次子组件更新父组件的状态后，父组件会重新渲染，从而导致子组件再次更新父组件的状态，形成一个无限循环的重新渲染过程。
为了避免这种情况，可以采取以下几种解决方案：
- 将子组件的状态提升到父组件：将子组件的状态移动到父组件中管理，通过props将状态传递给子组件。这样子组件就不会直接修改父组件的状态，从而避免了重新渲染的问题。
- 使用回调函数：通过在父组件中定义一个回调函数，将该函数作为props传递给子组件。子组件在需要更新父组件状态时，调用该回调函数并传递新的状态值作为参数。这样可以实现子组件更新父组件状态的目的，同时避免重新渲染的问题。
- 使用shouldComponentUpdate或React.memo进行性能优化：在父组件中使用shouldComponentUpdate或React.memo来控制组件是否重新渲染。通过对比前后状态的变化，可以决定是否需要重新渲染组件。这样可以避免不必要的重新渲染，提高性能。
总结起来，从子对象设置父状态会导致不断地重新渲染，为了避免这个问题，可以将子组件的状态提升到父组件、使用回调函数或进行性能优化来解决。在腾讯云的云计算平台中，可以使用腾讯云函数（SCF）来实现无服务器的后端逻辑，腾讯云数据库（TencentDB）来存储和管理数据，腾讯云CDN（Content Delivery Network）来加速内容分发，腾讯云容器服务（TKE）来管理容器化应用等。具体产品介绍和链接地址可以参考腾讯云官方网站。
相关·内容
下面的代码是Parent和DataFilter。
Parent.js
const Parent = () => {
const [filteredData, setFilteredData] = useState()
...
const Filter = () => {
return (
<div>
<h2>Filter your data</h2>
<DataFilter data={filteredData} updateFilter={setFilteredData}
浏览 8提问于2021-12-15得票数 0
2回答
我有个案子： const Parent = () => {
const [value, setValue] = useState('');
return <>
<Child1 value={value} />
<Child2 setValue={setValue} />
</>
} 但是每次调用Child2的setValue时，Child2都会重新渲染，尽管它的道具没有更改(Child1也会重新渲染，但这是自属性value更改后的预期行为)。 如何解决这个问题？
浏览 82提问于2021-11-12得票数 1
回答已采纳
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
我在流实时数据方面做了相当多的工作，我发现一个分离系统不同位元的进程模型工作得很好。在程序的生命周期中，能够以流式方式打开子进程并读取数据通常非常方便/简洁。但是，如果子进程在父进程结束之前没有正确地等待()-ed，那么很容易就会出现僵尸或孤儿。
我正在寻找的基本上是什么，它将得到RAII风格的保证子进程被适当清理。理想情况下，不管父程序是如何退出的，无论是响应一个信号，调用exit()，抛出异常等等。我想安安静静地睡一觉，因为我永远无法生成僵尸或孤儿进程。
浏览 0提问于2016-03-15得票数 3
3回答
我有一个从ParentComponent传递到ChildComponent的属性，它会根据用户的输入进行更改。我希望在呈现ChildComponent之前属性发生变化时，在ChildComponent中触发数据获取。我该怎么做呢？我尝试了以下方式，使用useEffects(()=>{}，pros.a，pros.b)，但它总是在渲染之后调用。请帮帮我！
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function pare
浏览 0提问于2020-09-03得票数 4
回答已采纳
我试图使用回调函数将数据从子组件(拥有表单)传递到父组件，但不能使用父函数中的event.preventDefault()，我的代码如下：
function handleSubmit (event) {
console.log("Done")
event.preventDefault()
}
<LoginForm onFormSubmit={handleSubmit}/>
这是我的子窗体组件：
const [currentUser, setCurrentUser] = useState({
username: "",
浏览 15提问于2020-05-21得票数 1
回答已采纳
假设我们有一个名为MyChildComponent的组件，它将用于显示数字列表，还可以通过在MyChildComponent中单击按钮将随机数字添加到列表中。单击按钮时，只有MyChildComponent会重新渲染，因为只有MyChildComponent的状态会更新。 public class MyParentComponent extends React.Component {
const numsInParent = [0,1,2];
render() {
return <MyChildComponent nums="numsInPare
浏览 27提问于2021-02-12得票数 3
回答已采纳
好吧，我已经知道一种方法了。然而，我问这个是为了防止我重新发明轮子，因为我是一个非常新的反应。我的印象是，如果父组件通过道具将其状态传递给子组件，而不是在更新父组件的状态时，子组件将在需要时重新渲染。但事实似乎并非如此。我举了个例子，
class Child extends Component {
constructor(props) {
super(props);
this.state = {
number: props.number,
};
}
updateNumber(n) {
this.setState({number: n})
浏览 2提问于2019-11-23得票数 5
回答已采纳
我认为react-spring会导致组件重新渲染很多次，所以如果它是一个已经有大量useSpring()工作要做的组件，那么react-spring不是最适合这个任务的。
在他们的示例中，我可以看到它重新渲染了很多次：
(通过查看console.log输出，其中包含大量的renderCount打印输出。当我们将持续时间更改为5000 (即5秒)时，打印输出要多得多。
同样，如果它是一个类似于react-spring的组件，它会呈现很多内容：
但是，以下代码：
let renderCount = 0
export default function App() {
const style
浏览 4提问于2021-04-21得票数 1
大家好，Stack Overflow！
我有两个组件：NewArticle和HoveringMenu。
在NewArticle中，我有一个JSON对象，如下所示：
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
浏览 1提问于2018-04-08得票数 0
1回答
我想实现子程序的排序功能，其中道具是通过一个axios调用从父函数传入的--我应该吗？
在子useState中存储道具
从道具传入父setState来实现这一点？
假设我不需要父母重新排序，我的想法是1可能更有利-只是我不确定在setState中存储道具是一种常见的模式。
第一个案例() -在子useState中存储道具
父母jsx
import { useEffect, useRef, useState } from "react";
import "./styles.css";
import Child from "./Child&#
浏览 4提问于2022-05-22得票数 0
我有一个App组件，它只返回一个名为Home的React组件。在App组件中，我有一个没有依赖性的useEffect，当Home组件中的某些东西发生变化时，我希望重新呈现它，但这种情况没有发生。没有反应支持这样的事情吗？
浏览 4提问于2022-08-23得票数 -1
回答已采纳
我正在尝试使用我的应用程序中的react-select "Select“组件作为一种便捷的方式来生成一系列下拉列表作为我的UI的一部分。 从react-select文档中，我已经能够让这些组件呈现所需的选项；但是，从选择组件存储的值是通过useState钩子存储为状态变量的。 我需要将这些菜单的值(状态)传递给父组件。我不知道如何获得在这些函数中生成的状态值，以便能够在更高的父组件中读取。下面是我目前所拥有的一些代码片段。 注意:填充这些子函数的选项属性的数组是在更高的父组件中生成的，并作为属性传递。代码的一部分似乎没有问题 function ButtonA(props){
co
浏览 20提问于2021-07-20得票数 0
1回答
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
2回答
我刚刚开始使用面向对象的php，所以请原谅我的无知。
假设我有一个A级
class A{
function show(){
return 15;
}
}
和一个子类B
class B extends A{
function show(){
return 25;
}
}
当我这样做的时候
$object = new B;
$object->show();
我得到25，这意味着我访问了孩子属性。如何访问parent属性；
我尝试了$object->A::show()，$object::sho
浏览 0提问于2012-02-27得票数 0
回答已采纳
1回答
.map函数在页面上多次重新呈现
、、、、
问题:在导航栏上，标签应该会出现，然后停留，但当我运行代码时，它会不断地从第一个移动到最后一个，就像第一个标签移到第二个，第二个标签移到第三个，循环一直没有停止。
前端代码(此代码已经包含在返回函数中)：
const Navbar = () => {
useEffect(() => {
fetch("/tags", {
headers: {
Accept: "application/json",
"Content-Type": "application/json"
浏览 0提问于2021-10-31得票数 0
编辑:为更流畅的阅读添加注释
注:这是我的第一个React.js应用程序，我从未成功地实现过useState()或useEffect()钩子！
问题
我已经将一个JS对象从一个子元素(LoginInputForm.js)传递给它的父元素(Login.js)，并且运行非常顺利。我正在执行的整个API调用在没有useEffect()的情况下能够很好地工作，但没有执行我期望它执行的条件逻辑，即“只在从子元素获得数据时执行此API调用并更新全局上下文，但在此之前，延迟进程(在此期间仍将创建一个加载部分，以便在此功能正常工作时显示)”。我这么做是因为我希望在这个演示程序中在登录时模拟一个身份验证系统，并
浏览 2提问于2022-10-19得票数 0
回答已采纳
// Getting the main context:
let mainContext = appDelegate.persistentContainer.viewContext
// Creating a child context:
let childContext = NSManagedObjectContext(concurrencyType: .privateQueueConcurrencyType)
childContext.parent = mainContext
print(childContext.automaticallyMergesChangesFromParent)
浏览 1提问于2021-04-07得票数 0
回答已采纳
2回答
频繁的纹理和着色绑定会降低渲染性能吗？
“频繁”绑定示例：
for object
for material in object
render part of object using that material
“低计数”绑定示例：
for material
for object in material
render part of object using that material
我计划稍后使用八叉树，使用这种“低计数”的呈现方法可以大大增加内存消耗。这是个好主意吗？
浏览 0提问于2012-06-27得票数 5
回答已采纳
我有三个组成部分，一个是另一个的父母。单击子组件时，我希望呈现整个父组件。实现这一目标的正确途径是什么？
浏览 1提问于2018-05-27得票数 0
回答已采纳
我有几个关于反应挂钩的问题：useState和useCallback。
究竟什么时候需要？
1.1。如果setter函数接收到一个函数，它的参数将始终是以前的状态吗？
如果我想从子组件中更新父状态，我应该如何将setter传递给子-将它包装在另一个函数中作为回调(如解释的 )？就像建议的那样直接传递
2.1。每种方法的原因和优缺点是什么？
如果我可以直接传递它，并且我使用的是备忘录，那么useCallback是否需要解释
如果我想在从子节点更新父状态时使用最新的状态数据，我应该如何做到这一点？
4.1。在这种情况下，向孩子传递回调有用吗？
浏览 0提问于2020-04-21得票数 1
回答已采纳
我被告知，如果父母的道具发生变化，孩子不会重新呈现，而是如果父母的状态发生变化。
在下面的情况下，当我单击按钮，子重呈现，这是合理的，因为它的父母的状态是被触发的，但我不知道为什么孙女也得到重新渲染！它的父母的状态(孩子的状态)没有改变。
那么这里的规矩是什么？
会是什么情况：
1)应用程序只呈现一个子和外孙呈现？
2)应用程序呈现但独生子女不呈现孙女？
顺便说一句，我不是指如何使用或pureComponent，我只是想知道React如何呈现嵌套的子程序:)
import React, { useState } from "react";
const App = () =&g
浏览 1提问于2019-11-17得票数 2
回答已采纳
1回答
我想要做的是，当我按下delete时，我想通过传递小于value的1的子值来删除最后一个按钮，然后再次通过地图进行重新渲染 export default function App() {
const [value, setValue] = useState(2);
return (
<div>
<ChildComponent value={value} setValue={setValue} />
</div>
);
}
export con
浏览 15提问于2021-03-27得票数 0
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Row from 'muicss/lib/react/row'
import ReactCSSTransitionGroup from 'react-addon
浏览 141提问于2019-03-19得票数 0
回答已采纳
请建议如何获取没有状态的每一秒的当前时间，因为它在每次更新状态时都会渲染组件。请检查以下使用state完成的代码
export default class Local extends React.Component {
state = {
messages: [],
currentTime: Date.now()
}
updateCurrentTime() {
setInterval(() => {
this.setState({
currentTime : new Date().getSeconds()
})
}, 1000)
}
componentDidMoun
浏览 8提问于2021-03-11得票数 0
回答已采纳
我正在从db中删除一条记录，为此我调用了一个API。当我收到一个成功删除的API响应时，我需要像reload一样重新渲染所有组件。我在this.forceUpdate和shouldComponentAgain上试过了，但是没有成功。
我也尝试过componentDidUpdate，它可以工作，但它调用API的次数是无限的。下面是我使用componentDidUpdate的代码
componentDidUpdate(){
let newThis = this;
getAccounts().then(function(response){
if(response.status===
浏览 0提问于2018-11-30得票数 0
如果您要记录每个组件的呈现的开始和结束，它们将独立于它们呈现的子组件开始和结束。为什么子渲染不能在父渲染的开头和结尾进行渲染？
谢谢!
浏览 4提问于2017-07-22得票数 0
我在从API获取从子节点到父节点的数据时遇到了一个问题
孩子：
class Carton extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
matchData: []
};
}
在这里，我从API获取数据并更新状态
async componentDidMount() {
setTimeout(() => {
this.loading = true;
fetch(url)
.then(res => res.json()
浏览 2提问于2019-11-18得票数 0
1回答
我刚开始对React中的渲染过程感到困惑。
假设我有一个高阶组件，如下所示：
const withHOC = () => WrapperComponent => {
return class WithHOC extends React.Component {
render() {
//someProps => what will change...
//...rest => won't change
const { someProps, ...rest } = th
浏览 0提问于2018-08-28得票数 0
回答已采纳
我正在制作一个卡片系统，可以使用拖放来交换卡片。当我把卡片拖到另一个上面时，我的状态正在更新，但它不会重新渲染。
import React, {useRef, useState} from 'react';
import DnDGroup from './DndGroup';
const DragNDrop = ({data}) => {
const [list, setList] = useState(data);
const dragItem = useRef();
const dragNode = useRef();
const
浏览 0提问于2021-02-01得票数 0
2回答
从子块更新父块属性？
、、、
我似乎找不到一个我能理解的答案
我有制表符和制表符块，这是的一个克隆。我试图添加为每个选项卡块选择一个“图标”的能力。
我快到了。使用MediaUpload组件，我能够看到我在activeTab对象下选择的文件，但是它没有更新父块属性，所以我不能引用icon_url属性。
选项卡/ud.js
const Edit = ({ attributes, setAttributes, clientId }) => {
const { uid, activeTab } = attributes;
useEffect(() => {
if (!uid) {
浏览 21提问于2022-11-27得票数 0
为什么我们同时有state和props？为什么我们不能只有一个数据源呢？我想要更新一个组件的props，并让它重新渲染自身和它的所有子组件。看起来很简单，但我不知道如何让一个组件更新它自己或其父组件的道具。
谢谢你的帮助。
浏览 1提问于2014-09-29得票数 54
我想使用vuetify的data-table组件创建我自己的表组件。
这是我所做工作的沙箱：
基本上，SampleTable是Vuetify数据表的包装器。在table组件中，我希望使这些项可选。我能够使用select-all属性来渲染复选框。我使用items插槽来呈现每一行的复选框。
我面临的问题是，当用户选中一个复选框时，input事件不会触发(参见控制台获取消息)，但是，如果选中/取消选中标题中的复选框，input事件就会正确触发。
我不知道为什么会发生这种事。请帮助查找我的代码中的问题。
浏览 7提问于2018-12-18得票数 0
回答已采纳
1回答
我正在尝试使用一个自定义钩子来调用获取数据的API。然后我尝试在我的上下文API中调用这个钩子。问题是钩子的主体被渲染了6次。因此，当我尝试使用自定义钩子(UseFetchData)返回的数据在上下文文件中进行setState时，我得到了错误- " error : Too - many - renders . React限制呈现的次数以防止无限循环“。我认为某些状态更改会导致它重新呈现。 context.js import React, { useState, createContext } from "react";
import useFetchData from
浏览 32提问于2020-08-19得票数 0
1回答
我有一个组件，在那里提交一个表格。我正在清理redux值。
submitForm.then(() => {
setUserAssignModal(false);
updateUserTrack({
counterOrdersCount: trackUserVisit.counterOrdersCount + 1
});
handleOrderSubmit(userOrdersData);
if (appliedDiscount) {
浏览 3提问于2020-01-31得票数 0
1回答
父组件 export interface IInvoiceDetailProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> { }
export const InvoiceDetail = (props: IInvoiceDetailProps) => {
useEffect(() => {
props.getEntity(props.match.params.id);
}, []);
const { invoiceEntity } = prop
浏览 40提问于2021-07-27得票数 0
下面是一个简单的例子：
const { Component } = React
const { render } = ReactDOM
const Label = ({ text }) => (
<p>{text}</p>
)
const Clock = ({ date }) => (
<div>{date.toLocaleTimeString()}</div>
)
class App extends Component {
constructor(props) {
super(props)
th
浏览 0提问于2018-08-25得票数 15
回答已采纳
我有一个父组件，它有一个布尔状态属性"showModal“。当showModal为真时，我渲染子组件"Modal“。这个模式有一个关闭按钮，它可以将"showModal“属性切换回false。"showModal“被作为道具传递给子Modal组件，但是因为道具在React中是不可变的，所以我还没有想出更改它的正确模式。
是否有某种双向数据绑定可供我使用？处理这个问题的最好方法是什么？
浏览 1提问于2016-08-15得票数 1
回答已采纳
我的redux状态部分(reducer)之一是filters reducer，用于存储每页的过滤器设置。它是key-object结构，所以看起来像这样：
{
dashboard: {
minDate: '2017-01-01',
maxDate: '2019-01-01',
//... other filters
},
otherPageKey: {
//... other filters
}
}
我的仪表板页面很大，但它包含从reducer：filters.dashboard.minDate读取的
浏览 0提问于2019-01-24得票数 0
我想知道直接使用状态渲染组件和使用道具渲染组件的区别。
getInitialState:
data: this.props.data
以下代码用于render函数
1.
data = this.state.data
return (<Component data={data} />)
2.
return (<Component data={this.state.data} />)
3.
return (<Component data={this.props.data} />)
当我在侦听回流操作上使用setState时，前两种情况会崩溃。如果任何人有
浏览 0提问于2015-05-27得票数 3
clickMusicHandler() {
//console.log(this.props.channel);
axios.put('/channels/'+'test', {
playList: {
songName: this.props.track.name,
artist: this.props.track.artists[0].name,
url: this.props.track.preview_url
}
})
浏览 9提问于2017-12-11得票数 0
1回答
我已经使用useEffect调用了我的api，并使用useState钩子存储了项的数组，但我发现很难将这些项呈现到一个自定义组件中，该组件也将传递数据。 下面是我的react代码片段： export default function CreateCast() {
const [open, setOpen] = useState(false);
const [bibleCastItems, setBibleCastItems] = useState([]);
const classes = useStyles();
const fabStyle = {
bottom: 50
浏览 16提问于2021-04-21得票数 0
回答已采纳
这个问题很难用语言表达出来。在React中，有没有办法让深度嵌套子组件(从父组件到父组件2层)调用与其有兄弟关系的函数？(同级位于父级的1层，但与深度嵌套的子级缺乏自上而下的关系)
该函数用于更改同级组件的状态，因此需要将其作为同级组件的类的方法进行调用
我知道我可以将一个函数作为道具传递给一个子类，并在父类上调用它，但是这种情况会发生在兄弟类上吗？
请让我知道这是否有意义，如果没有，我可以抛出一个简单的例子，我的意思是，有太多的代码，我粘贴。
浏览 0提问于2017-04-30得票数 1
据我所知，如果我将父组件状态向下传递给子组件，那么该子组件将获得父组件的活动状态。
因此，在父对象的状态中所做的更改也可以通过它所使用的道具立即在子对象中使用。
这是正确的吗？
浏览 2提问于2016-06-26得票数 34
1回答
我目前正在测试我在Android平台上的游戏所需的所有功能。我只修改了hello-gl2示例代码，并在两个渲染过程中添加了一些纹理、VBO、FBO和简单的着色器。
问题是，当我让应用程序在不接触屏幕的情况下运行时，我有大约35-45fps。但是如果我开始不断地触摸屏幕，渲染就会开始滞后！那么，这是一个问题，因为输入和渲染是在同一个线程中(正如a认为的那样？)，甚至有可能修复吗？如果我不能修复这个延迟，我的游戏可能运行得不够好，不能玩。(Is有一些繁重的渲染内容)
//提前感谢！
浏览 1提问于2011-03-09得票数 3
3回答
我有一个组件，用于在页面中的某处显示新闻。你可以给新闻打分(给它打个星)。 我在另一个显示一些新闻的地方有另一个组件。在该组件中，您还可以对新闻进行评级。我想在<SomeComponentWhereNewsAreDisplayed />投票后更新News组件(重新渲染它)。有办法做到这一点吗？ 一些伪代码： class SomeComponentWhereNewsAreDisplayed extends React.Component
{
voteAndUpdateNewsComponent() {
updateNewsComponent()
}
浏览 25提问于2020-03-29得票数 0
使用这样的模式安全吗：
const appLoaders = useMemo(() => React.createRef(), [])
问题是我在useEffect中使用了这个ref，并且依赖项数组中需要它(穷举-deps)。上面的模式起到了作用，一切似乎都正常--没有备忘录，当我将ref放入依赖数组时，应用程序正在不断地重新渲染。
我只是想知道，在某些情况下，是否有一些“陷阱”会让我感到惊讶。
浏览 11提问于2020-02-19得票数 1
回答已采纳
2回答
我是个新手，对网络本身也是如此。
这是我的渲染函数
render() {
const {repositories} = this.props
return (
<div className='mt4 bt b--black-20 boardingbox scrollarea-content' style={{overflow: 'scroll', height: '100vh'}}>
{
repositories.map((repo, i
浏览 0提问于2018-03-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
