React中未更新子组件
在React中，当父组件的状态发生变化时，React会自动重新渲染父组件及其所有子组件。然而，有时候子组件可能没有及时更新，这可能是由于以下几个原因导致的：
- 错误的使用了shouldComponentUpdate方法：shouldComponentUpdate方法用于控制组件是否需要重新渲染。如果在子组件中错误地实现了shouldComponentUpdate方法，并且返回了false，那么即使父组件的状态发生了变化，子组件也不会重新渲染。解决这个问题的方法是确保shouldComponentUpdate方法正确地返回true。
- 子组件使用了旧的props：在React中，当父组件的props发生变化时，会将新的props传递给子组件。如果子组件没有正确地使用新的props，而是使用了旧的props，那么子组件就无法更新。解决这个问题的方法是在子组件中使用正确的props。
- 子组件使用了旧的state：类似于props，当父组件的state发生变化时，会将新的state传递给子组件。如果子组件没有正确地使用新的state，而是使用了旧的state，那么子组件就无法更新。解决这个问题的方法是在子组件中使用正确的state。
为了解决React中未更新子组件的问题，可以采取以下几个步骤：
- 确保子组件正确地实现了shouldComponentUpdate方法，并且返回了true。
- 检查子组件是否正确地使用了新的props和state。
- 如果子组件仍然没有更新，可以尝试使用React的强制更新机制。可以在父组件中调用子组件的forceUpdate方法，强制子组件重新渲染。
总结起来，React中未更新子组件的问题可能是由于shouldComponentUpdate方法的错误实现、子组件使用了旧的props或state等原因导致的。通过确保正确实现shouldComponentUpdate方法，并正确使用新的props和state，以及使用forceUpdate方法，可以解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙服务（Tencent XR）：https://cloud.tencent.com/product/xr
相关·内容
上下文
我正试着用google-map-react展示当地的面包店。
但是，我的子组件console.log(props);中的行StoresGoogleMap将storeLocations和stores打印为[]。如果我在我的StoresGoogleMap组件中使用下面的内容，则它正在工作：
{props.storeLocations.map((storeLocation) => (
<Marker
key={storeLocation.unique_store_name}
lat={st
浏览 10提问于2022-02-22得票数 0
回答已采纳
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
我有一个主组件和一个子组件，其中我使用了antd表。代码不会抛出任何异常，所选的ids会正确地流向主组件。 但是，在单击复选框后会将其清除，因此我不确定这里遗漏了什么 主要组件 import React, { Component } from 'react';
import { Input} from 'antd';
import Form from '../../components/uielements/form';
import Button from '../../components/uielements/button'
浏览 96提问于2019-02-22得票数 1
回答已采纳
在下面的React App代码中，我设置了一个useState属性，该属性绑定到一个名为Header的函数组件。演示代码中没有显示的是，我从位于HomePage组件中的另一个子组件调用triggerTestProp函数。 但是，每当我设置此属性时，不仅横幅会重新呈现，而且包含标题的整个页面也会重新呈现。我使用React Router进行导航，如演示代码中所示。你知道为什么整个页面都会被重新渲染，而不是像预期的那样只呈现标题吗？ function App() {
const [testProp, setTestProp] = useState(
"defaultVal
浏览 44提问于2020-06-21得票数 0
回答已采纳
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
即使shouldComponentUpdate()返回false，当使用setState()调用更新组件时，react如何为组件创建新的虚拟DOM？
react是否会为所有组件重新创建虚拟DOM，甚至是没有调用setState()的组件？我的意思是，假设对子组件调用setState()，是否也会为父组件反应一个新的虚拟DOM？
浏览 0提问于2019-06-05得票数 0
为了更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但我意识到，可以在不侦听ComponentWillReceiveProps的情况下更新子组件的props。
例如，在以下名为App的组件中，子组件Comp能够在不侦听生命周期方法ComponentWillReceiveProps的情况下接收props。
主要的App组件：
import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp
浏览 6提问于2019-07-09得票数 2
1回答
我有测试反应组件的问题。这是我的密码。
// Component textfield-input.jsx
import React, { PropTypes } from 'react'
import HelpComponent from '../../atoms/help-component'
export default function TextField(props) {
const { helpMessage, label, error, ...rest } = props
return (
<div class
浏览 1提问于2017-05-29得票数 0
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
基本上，我有一个非常简单的react组件。它所做的就是包装“react-intercom”，并且只有在状态发生变化时才会呈现它。为了简化这个问题，我将shouldCompoenentUpdate()方法硬连接为总是返回false。
import React from 'react';
import Intercom from 'react-intercom';
class IntercomWrapper extends React.Component {
shouldComponentUpdate(nextP
浏览 6提问于2017-09-13得票数 15
1回答
这是一个有点模糊的问题，但让我尝试通过伪码。如果我在父对象中创建子对象数组：
class Parent extends React.Component {
constructor() {
this.state = {kids: [<Child/>,<Child/>]};
}
render () {
return <div>{this.state.kids[0]}{this.state.kids[1]}</div>
}
}
class Child extends React.Compo
浏览 3提问于2016-10-07得票数 0
2回答
我使用React和API来获取数据并将其预填充到表单字段中，这样用户就可以编辑现有的记录。
但是，子组件似乎只接收最初创建的longhorn实体的版本，而不是API获取的版本，也没有更新。
相关的父页代码：
React.useEffect(() => {
async function getLonghorn() {
let response = await fetch(`http://127.0.0.1:8081/longhorns/${longhornID}`, { method: 'get' })
let
浏览 12提问于2022-11-22得票数 1
回答已采纳
在本例中，componentDidUpdate是在设置状态跟踪时触发的。HelloMessage道具和状态没有改变，所以为什么要调用这个方法？如何防止这种情况发生？
class HelloMessage extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('HelloMessage did update');
}
render() {
return <div>Hellooo</div>;
}
}
class A
浏览 0提问于2018-08-17得票数 1
回答已采纳
1回答
我有一个使用mapbox地图的应用程序，我正在尝试从另一个单独的卡组件中调整视口。我这样做的方式是创建一个viewport上下文，并将viewport和函数传递给map和card组件。
这是可行的，但我遇到了重新命名的问题。每当用户在地图上滚动时，视图端口就会不断变化，因此viewport提供程序中的所有内容都会不断地重新命名。代码的简化版本如下
应用程序
<ViewportProvider>
*Container that holds both the map and the sidebar that renders the card components*
</Vi
浏览 1提问于2022-01-02得票数 3
回答已采纳
就在我以为我理解上下文的时候，我又不明白了。我创建了一个数据库上下文，主要是无缘无故的，因为它是一个全局的，可以仅仅用作var，但是我偏离了主题。我想要有反应。不管怎么说，组件看起来像这样
import { createContext, useContext } from "react";
import { Database } from "../lib/database/Database";
const db = new Database();
export interface DatabaseContextValues {
db: Database;
浏览 1提问于2022-08-01得票数 1
回答已采纳
1回答
我正在尝试理解ReactJS中的渲染。我正在学习YouTube的这个教程，但我想更好地掌握这个主题。该视频解释说，如果您传递子组件
<Child/>
然后它将触发父级和子级的呈现。不过，如果你传下去
{props.children}
然后，它将只更新父级，如果子代没有更改。但如果我有一系列不同的孩子呢？如果我有20个孩子或者100个孩子呢？我想把道具传给一个特定的孩子？说我想把道具传给50岁的孩子(或其他孩子)。那我该怎么做呢？
如果我想传递这些常量，孩子们是只在收到道具的情况下才重新渲染，还是会全部重呈现？
const [childA, setChildA] = useState
浏览 5提问于2022-05-23得票数 1
1回答
我有一个反应容器：
export const SomeContainer = ({disabled, onClick}) => {
let someElement = <img src="/path">
return (
<CustomButton className="my-class" icon={someElement} onClick={onClick} disabled={disabled}>
);
};
const mapStateToProps = (state) => ({
disab
浏览 2提问于2017-09-18得票数 0
我有一个使用Material UI v5的react应用程序。我没有任何样式，正在使用默认的TextField组件来测试渲染问题。在我的页面中，我只有一个Typography、Breadcrumb、IconButton和TextField。为了复制这个问题，我放置了一个受控TextField和大约六个其他非受控TextFields。当我开始在受控的TextField上编写代码时，页面中的所有组件都开始重新呈现。如果我开始大量/更快地输入，它有时会冻结，或者需要一段时间(比如500-1000ms)才能在TextField中呈现文本。基本上，它会冻结一秒或半秒。 这是我所拥有的replicate
浏览 17提问于2021-09-23得票数 0
2回答
通过，我了解了React自动维护子组件的状态，这就是为什么
不应该在州里去什么？
React ：基于底层支持和状态在render()中构建它们。
现在，我的问题是如何对我们正在隐藏的组件做同样的操作？
考虑一个子组件，它在迭代中不会被显示，同时我们希望保留它的状态，以便将来它将被带回！
为了说明我的确切意思，我设计了一个案例场景来向您展示。在下面的代码中，您可以添加有状态子组件。为每个组件提供了一个复选框，这样您就可以标记它们。最后，第三个按钮将隐藏未被标记的子组件。我正在寻找一种方法来恢复未标记的组件的状态，一旦它们被带回来。
class BlackBox extends Reac
浏览 6提问于2016-05-24得票数 3
回答已采纳
我查了一段代码发现
this.props.formVisibility = false
由于无法更新react组件中的属性，所以代码不应该有工作，但是执行过程中没有任何错误。
现在我想知道，在什么条件下可以在组件中编辑道具？
浏览 0提问于2018-02-21得票数 1
回答已采纳
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
我是新的反应-本机，我有一个错误，试图创建TabBarIOS。它一直告诉我，onlyChild必须传递给一个只有一个孩子的孩子，但是我的代码与我遵循的教程完全相同。
index.ios.js
'use strict';
var React = require('react-native');
var Welcome = require('./welcome.js');
var More = require('./more.js');
var {
Alert,
AppRegistry,
StyleSheet,
Te
浏览 0提问于2016-04-13得票数 0
回答已采纳
2回答
我希望将共享功能从我的react组件移到下面这样的高阶组件上：
function withListFunctions(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
}
// my shared functionality
deleteItem() {
// Do something, then ...
this.
浏览 0提问于2018-11-25得票数 5
回答已采纳
我试图用新的道具值从Ant-DesignUI中更新和Steps组件，如下所示：
import React from 'react';
import { Progress, Steps } from 'antd'
const Step = Steps.Step
const Parent = ({ a }) => {
const haveCompleted = () => {
var intr = setInterval(() => {
if(c < 754) {
console.log(c)
浏览 1提问于2019-04-13得票数 0
1回答
我正在设置一个新的meteor react应用程序，它从服务器订阅新数据。我只想将数据绑定到主页面组件。我有以下代码主页组件。 import React from 'react';
import ReactDOM from 'react-dom';
import RealTime from '../../../lib/client/RealTime';
// TrackerReact is imported (default) with Meteor 1.3 new module system
impor
浏览 21提问于2019-05-15得票数 0
请告诉我why my header render every time already use React.memo ?，当我从my apps到user header的导航时，我有两部分my app and user，为什么？
这是我的密码
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
const Header = React.memo(function() {
console.log("Head
浏览 2提问于2020-04-22得票数 3
回答已采纳
我正在更新状态消息和id of TalkContent，并且我试图将其传递给适当的对话子(这本身就是TalkContent的子代)。
TalkContent
class TalkContent extends React.Component{
constructor(props){
super(props)
this.state = { talks : [], id : -1, messages : []};
//
}
render(){
if (this.state.id === -1)
{
return(
浏览 3提问于2017-05-02得票数 0
1回答
我将客户端设置的配置设置存储在本地存储中。当有人更新一个值时，我们将其保存到本地存储中。当他们加载页面时，我们从本地存储中获取它。粘性状态的代码是： import React from 'react';
export default function useStickyState(key, defaultValue) {
if (!process.browser) {
return React.useState({})
}
const [value, setValue] = React.useState(() => {
浏览 19提问于2021-04-15得票数 1
2回答
我有一个带有name属性和子文本的React元素，这两个元素都取自props中的相同值。
使用不同的属性值重新渲染React组件时，仅更新子文本，但name属性保持不变：
var Inner = React.createClass({
render: function () {
var name = this.props.name;
return ( <div name={name}>{name}</div> );
}
});
React.render(<Inner name="red"/>, doc
浏览 2提问于2016-09-15得票数 2
1回答
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
嗨，我有两个react组件parent和child，它们都连接到redux store到同一个对象，对象从服务器asynchronously获取数据。
问题：在接收新道具时，父母的componentWillReceiveProps会被执行，但是孩子的componentWillReceiveProps没有执行任何想法？？
子组件
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redu
浏览 2提问于2017-08-14得票数 1
我在setState中设置了多个状态，但是其中一个状态并不总是会改变。React是否足够智能，可以绕过设置它保持不变的状态？
浏览 0提问于2018-03-08得票数 0
1回答
我在组件回购中使用i18next。组件工作正常，但我在测试方面有问题。我将i18next与hoc一起使用，当我只导出组件时，测试就会通过，但是当我导出它时，就像导出默认翻译('components') (列表)一样；测试失败。我试着做两个导出，使用hoc和不带，但是在另一个中使用了一些组件，如果没有hoc，我就无法导入它。我的架构看起来像:使用I18nextProvider的根组件，我已经用这个组件包装了每个组件，它是我的主应用程序中的主要组件。就像这样：
const Root = ({ component, i18 }) => (
<I18nextProvid
浏览 3提问于2018-02-18得票数 1
我正在使用Storybook 5.2.6 for React 16.9.0和Typescript 3.5.3，并使用Material UI主题组件。在添加和配置了@ Storybook /addon-docs之后，当组件从@ PropsTable -ui中被包装时，Storybook文档页面在withStyles中显示：“Cannot read property 'classes‘of undefined”。
组件：
import React, {FunctionComponent} from 'react';
import { Typography } from &#
浏览 11提问于2019-11-13得票数 3
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
这是父组件的代码。它有一个按钮，也包含一个子组件。
我的问题是:当prop的值发生变化时，React是否能够发送state？如果没有，那么当状态发生变化时，我需要做什么才能发送支柱呢？
虽然组件在状态改变后会重新呈现，但我不得不单击该按钮两次才能看到文本中的更改。
如何使其与父组件中的状态变化同步进行？
父组件代码：
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2018-10-07得票数 0
回答已采纳
2回答
我想知道我是否可以在react中做到这一点，我想从JS文件中调用react组件的函数或方法，这样我就可以更改该组件的状态。
例如，我有以下三个文件
第一个App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession
浏览 3提问于2018-03-07得票数 1
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
1回答
我正在尝试获取父组件，以便从子组件中检索一些信息。具体来说，让父组件检索子组件的当前状态。当我尝试下面的方法，并尝试呈现更新的父级时，更新速度会减慢。在这里的片段中，它只是返回给我一个简单的脚本错误。有比我目前在componentWillUpdate上检索子状态的方法更好的方法吗？谢谢!
class Parent extends React.Component {
constructor(props) {
super();
this.state = {
parentState: "default",
}
this.getCh
浏览 3提问于2017-10-26得票数 0
回答已采纳
这是一个最好的实践问题，而不是任何事情。但是，我想知道React组件中的任何内联函数是否应该与onCallback一起包装以提高性能？在什么情况下，我不会用onCallback包装这样的函数？
例如：
const ToolSearch = (props: ToolsSearchProps) => {
const handleOnClick = () => {
alert('do something');
}
return (
<NoCardOverflow>
<ToolSearchCollapse o
浏览 3提问于2022-04-25得票数 0
回答已采纳
我对reactjs并不熟悉，也不知道如何将单击状态推回父shell。我正在构建的一些组件是d3.js图表--我希望能够方便地显示数据--但是让用户选择一个节点，这样他们就可以对数据进行向下钻取。
因此，如果有人单击饼图的段-获取onclick部分并将该节点的id/数据推回父节点。
//图表演示
这是演示
//假饼图
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import * as d3 from "d3";
class DoughPie
浏览 2提问于2017-10-04得票数 0
回答已采纳
4回答
首先，我要指出，我不需要得到现成的解决办法。我只是需要一些指导如何正确地做这件事。
我有这样的父组件
import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js&
浏览 4提问于2020-12-28得票数 0
回答已采纳
我尝试使用react与react-d3，但我总是会出错，在第一次，我已经使用了react v16，但它请求React v0.14.9。
所以现在我可以在出现错误之前看到图表。
我用过。
将其设置为错误后：
findComponentRoot(..., .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbod
浏览 0提问于2018-07-24得票数 8
回答已采纳
2回答
我是React ES6的新手，我认为我正在以错误的方式修改状态。当我在父组件上设置状态时，我的代码如下：
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent parentObj={this} /> // parentObj for parent context as props on child co
浏览 0提问于2017-01-16得票数 20
回答已采纳
2回答
我是新来的反应。我们能改变道具的状态吗？例如，我有2段代码
App.js
import React, { useState } from 'react'
import Print from '../components/Print/print'
const [text, setText] = useState("Hi");
<Print text = {text} />
print.js
import React, { useState } from 'react'
const Print = (props)
浏览 5提问于2021-12-29得票数 -4
回答已采纳
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
2回答
我有一个API，它返回系统中的用户喜欢的所有对象(GET /loves.json)。我正在显示一组对象，如果用户喜欢使用react的给定产品，那么我希望使用对API的单个调用来'color‘。到目前为止，我已经：
components/love.js.jsx.coffee
class Components.Love extends React.Component
@propTypes =
id: React.PropTypes.number
type: React.PropTypes.string
constructor: (props) ->
浏览 0提问于2015-06-09得票数 0
回答已采纳
我在React Native应用程序中有一个规范化的Redux存储。 我的减速器的结构是： {
byId: {},
allIds: []
} 在我的组件中，我使用useSelector钩子获取Redux状态的切片： const categories = useSelector((state: AppState) =>
state.products.allIds.map((id) => state.categories.byId[id.toString()])
); useSelector中的逻辑只是将byId对象转换为数组。 当我将categories数组设置为依赖项
浏览 127提问于2021-10-23得票数 0
回答已采纳
3回答
ReactJS新手。使用。
问题：
我有一个容器(React.Component)，它从redux-saga中执行的异步调用中接收数据。当数据存储到状态中时，容器会按照ReactJS的预期进行更新。数据被传递给两个不同的子组件，这两个子组件使用数据呈现图表。问题是，当一个组件使用的数据发生更改时，整个视图都会刷新，这意味着另一个组件会重新呈现。
代码:容器
export class Social extends React.Component {
render() {
return (
<div>
<SocialChart data={
浏览 2提问于2016-11-03得票数 3
2回答
我有一个select下拉组件作为子组件，其中选项(类别列表)是由父组件中的componentDidMount上的API生成的。当用户选择选项(类别)时，必须将选定的值传递回父component.The父组件，根据所选值执行get请求，并将结果作为选项(产品列表)传递给另一个具有select下拉列表的子组件。
我希望将这些子组件保持为无状态函数，因为它可以在多个组件中使用。
因此，类别列表在select下拉列表中作为道具传递-开发人员工具：
但不在网页上。
父容器
categories() {
return this.props.category && thi
浏览 0提问于2018-02-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
