react中的属性更改不起作用时重新渲染
在React中，当属性更改但组件没有重新渲染时，可能是由于以下几个原因：
- 属性没有正确传递：确保属性正确地传递给了组件。在父组件中，通过更改属性值来触发子组件的重新渲染。
- 属性没有引起组件的重新渲染：React中的组件只有在其属性或状态发生变化时才会重新渲染。如果属性没有引起组件的重新渲染，可能是因为属性值没有发生变化，或者属性值是一个引用类型，但其内部的值没有发生变化。
- 使用了不可变数据：React鼓励使用不可变数据，即每次更改数据时都创建一个新的副本。如果直接修改了属性对象或数组，React可能无法检测到属性的变化，从而不会重新渲染组件。确保在更改属性时使用不可变的方式，例如使用
Object.assign或扩展运算符创建新的对象，或使用Array.slice或Array.concat创建新的数组。 - 使用了浅比较：React默认使用浅比较来检测属性的变化。如果属性是一个复杂对象或数组，但其引用没有发生变化，React可能无法检测到属性的变化。在这种情况下，可以使用
React.memo或shouldComponentUpdate方法来自定义比较逻辑，确保属性的变化能够被检测到。 - 组件没有正确实现
shouldComponentUpdate方法：如果组件实现了shouldComponentUpdate方法，并且该方法返回了false，则组件将不会重新渲染。确保shouldComponentUpdate方法正确地判断属性的变化，并返回相应的布尔值。
总结起来，当React中的属性更改不起作用时重新渲染，我们需要确保属性正确传递、属性引起组件的重新渲染、使用不可变数据、避免浅比较问题，并正确实现shouldComponentUpdate方法。这样可以保证属性的变化能够被正确检测到，并触发组件的重新渲染。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr
相关·内容
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
import React from "react";
const Content = ({children}) => {
console.log("I am rendering multiple times on each update");
return children;
};
export default function App() {
const [open, setOpe
浏览 3提问于2020-06-12得票数 1
正如我在下面展示的，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
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
我正在用React框架创建spfx webpart。我有一个渲染方法，所有的控件都被渲染了。我有一个按钮，在DOM中的几个复选框将发送数据到SharePoint使用post方法this.context.spHttpClient.post当用户点击按钮时。我可以将数据提交给SharePoint。但是，一旦我提交了数据，我就不能重新加载spfx But部件。我必须在不重新加载页面的情况下重新加载web部件。我已尝试再次调用render方法。当然，它可能不是正确的方式，所以它不起作用。
浏览 0提问于2017-11-30得票数 1
目前我的组件渲染了4次。看起来它正在为每个道具渲染。如果我删除了除网络之外的道具，那么它只渲染一次，但是我确实需要其他道具。我在componentDidUpdate中使用了if语句，因为我需要检测更改，但是我渲染了4次，并且我的网络属性是相同的 export class Camera extends Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.network !== this.props.network){
this.connect(this.props.network)
浏览 135提问于2021-11-08得票数 3
回答已采纳
我目前有一个下拉select来过滤'Apply‘之后的一些图表。它工作得很好(见下面的截图)。
问题是，当选择了另一个timespan时，React会在我单击“Apply”按钮之前重新呈现所有图表。
我想通过实现shouldComponentUpdate来避免这种不必要的重新渲染，但是我不知道该怎么做。
下面是我尝试过的，但它不起作用(仍然是一个重新渲染)：
shouldComponentUpdate(nextState) {
if (this.state.timespanState !== nextState.timespanState) {
浏览 3提问于2021-10-12得票数 0
当使用多个useReducers时，每个组件都使用一部分状态渲染器。 import React, { useContext } from 'react'
import Store from '../store'
import { setName } from "../actions/nameActions"
const Name = () => {
const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
const handleIn
浏览 15提问于2019-05-30得票数 7
我有一个react组件，它使用第三方库组件作为子节点。孙子(或第三方图书馆的孩子)在我的控制之下。当我的组件接收到新的道具时，它会重新渲染，但是第三方组件似乎会阻止我的组件的子代组件重新渲染，即使我的组件收到的道具被直接传递给非重新渲染的组件。 如果我删除了第三方组件，那么我的组件会像孙子组件一样重新渲染。 render() {
<div>
<ThirdPartyComponent props={blah}>
{this.props.products.map(prod => <
浏览 16提问于2019-09-10得票数 1
回答已采纳
我正在尝试使用React创建一个折叠组件，但是动画不起作用。
基本的想法是，我相信，非常标准，我给每个项目主体一个0的max-height，它会被添加到一个元素的show类所影响。我可以选择并显示我想要的项目，但滑入/滑出的动画不起作用。
当Chrome开发工具打开时，当我点击其中一个项目时，我可以看到整个"accordion“元素正在闪烁，这让我相信整个元素正在被重新渲染。但我不确定为什么会出现这种情况。
下面是相关的Accordion组件：
import React, { useState } from "react";
const Accordion = ({
浏览 1提问于2020-01-25得票数 0
我第一次尝试Reactjs，但是当我想渲染一些东西时，它只在我重新启动我的项目时才渲染它。如果我按下保存，什么也不会发生。有没有人遇到过这个问题？
import React from 'react';
function App(){
return (
<div>
<h1>Hello React</h1>
<button>Button</button>
</div>
);
}
export default App;
import React from &
浏览 5提问于2019-08-17得票数 1
回答已采纳
我正在构建一个带有AgGridReact的react功能组件 const DataGrid = (props) =>
{
const [gridRowData, setGridRowData] = useState([]);
const [columnDefinition, setColumnDefinition] = useState([]);
useEffect(async () =>
{
if
浏览 41提问于2021-01-13得票数 0
回答已采纳
在react-native FlatListview中，我想在list中添加一个新项。
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
除了key a和b ie data = [{key: 'a'}, {key: 'b'},{key: 'c'}]之外，data还来自API。
每当新的键进入时，它都会呈现整个列表视图，这会产生一些
浏览 28提问于2017-12-16得票数 1
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
为了在我的React应用程序中获得更好的性能，我使用了PureComponent，它有props，但是我不希望它在这个props更改时运行render方法。我知道我们不能在shouldComponentUpdate中使用React.PureComponent，但我的问题是：
有没有办法避免更新React.PureComponent？
我希望这个组件根本不更新/渲染。
编辑:我在pureComponent中使用pureComponent时会收到这个警告：
警告: GameObjectFall有一个名为shouldComponentUpdate()的方法。在扩展shouldComponentUp
浏览 2提问于2017-11-27得票数 5
回答已采纳
因此，我目前正在使用React Hooks，我正在尝试使用useEffect。它假设每当依赖关系发生变化时，useEffect都会重新呈现，对吗？但它对我不起作用。下面是我的代码： const [slidesPerView, setSlidesPerView] = React.useState(0)
React.useEffect(() => {
setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
console.log("rerender?", slidesPerVie
浏览 25提问于2019-09-01得票数 8
回答已采纳
3回答
我正在做一些事情，我的一段代码有点慢，我认为发生的情况是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或react-native )中重新渲染了多少次？我尝试做的是在render方法后放置一个console.log，并计算有多少个，但我不确定这是否有效。提前感谢！
浏览 6提问于2019-02-07得票数 9
回答已采纳
我需要在悬停时更改img的url。但是这个函数会触发渲染的所有子对象。我找不到一种方法来让函数单独触发每个子函数。我尝试创建一些新的状态来处理索引，但它不起作用……
const Team = React.createClass ({
getInitialState : function() {
return { hovered: false }
},
componentDidMount(){
this.props.fetchTeam();
document.title = "Equipe | [ Adesign&#
浏览 0提问于2016-08-20得票数 1
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setI
浏览 1提问于2020-05-26得票数 3
4回答
我正在用react和react-leaflet制作地图。React Leaflet有一个名为FeatureGroup的类，我希望在第一次呈现时使用React中的useRef钩子访问它，然后访问useEffect函数中的值。但是，在初始渲染时，引用是未定义的(markerRef.current返回null)。只有在我对代码进行任何类型的更改后，保存并重新加载React应用程序，它才会获得值
你能告诉我我做错了什么吗?我怎样才能使markerRef.current在初始渲染时不为空？
请在下面找到组件的缩写代码：
import {useRef} from 'react';
im
浏览 3提问于2021-01-29得票数 2
我有以下样例react代码 const A = () => {
const [value1, setValue1] = React.useState(true);
const [value2, setValue2] = React.useState(true);
return (
<div>
<div class="first-comp">
<FirstComponent data1={value1} data2={value2} />
<
浏览 283提问于2021-09-14得票数 0
回答已采纳
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
3回答
我有一个react-bootstrap模式，里面有两个输入。当状态中的showModal属性更改为true时，将显示Modal。当输入值发生变化时，我会更新fieldOne属性(也在状态中)。所以，每当我在输入中输入一些东西时，模式也会闪烁(重新渲染)。
如何在更新状态时防止Modal重新渲染？
浏览 17提问于2020-02-03得票数 0
回答已采纳
我有一个react摘要页面，它通过使用ReportProgressSummary组件来显示折线图。 在初始加载时，数据集被映射以显示这些组件中的多个。 单击展开按钮后，将在下面呈现这些组件的更多更大的集合。我的问题是，初始组件也会重新呈现。 该组件显示了一个动态的线形图渲染，因此重新渲染非常明显。有没有办法防止重新渲染初始组件？ 我在想，我需要记录在ReportProgressSummary组件中达到的百分比值，并能够根据它的最终值进行测试，看看是否需要重新呈现……也许可以使用useRef()，但我不太确定如何... 例如，如果组件的百分比变量已经达到了传入的“result”值，则不需要再次
浏览 12提问于2020-01-17得票数 2
回答已采纳
在我的React应用程序的根组件中，我有以下内容：
class App extends Component {
...
ComponentDidMount() {
window.addEventListener('resize', this.handleResize, false);
}
handleResize{
this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
this.forceUpdate();
}
ren
浏览 4提问于2017-08-11得票数 0
回答已采纳
与React Blazor类似，当其参数(React中的“props”)更改时，Blazor重新渲染子组件。 对于原始类型，这与预期的一样，但我还没有弄清楚如何控制自定义类型。 似乎简单的对象总是被认为是不同的，即使对象没有改变： @page "/"
<h1>Hello, world!</h1>
<Nested Object="@myObject" />
<button @onclick="() => { }">clickme</button>
@code {
p
浏览 7提问于2020-12-06得票数 0
在这种情况下，我将为子组件发送相同的属性和状态，所以...为什么没有在没有React.memo()的情况下重新渲染，并且这些日志只显示了一次？
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Child = ({ num }) => {
const [count, setCount] = useState(0);
return (
<>
{console.log('Child render
浏览 1提问于2020-11-04得票数 0
我有一个父组件，它根据通过props接收到的数组来渲染子组件的集合。 import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';
const Parent = props => {
const { items } = props;
浏览 70提问于2019-11-22得票数 22
回答已采纳
我已经使用react了一段时间，并阅读了文档，我发现了一些对我来说很奇怪的东西，为什么react重新渲染组件的子元素在父组件的每个状态更改上，即使子道具是相同的?？为什么我要把我的组件包装在Memo()中以防止这种重现呢？将Memo设置为每个react组件的默认设置，或者我是否应该对所有组件都使用它，并不是更好。
浏览 4提问于2021-04-22得票数 2
1回答
物料UI开关不更改UI
、、、、
我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？
App.tsx：
import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import
浏览 2提问于2020-11-24得票数 1
4回答
我希望每次路由改变时console.log('Refresh')都会运行(从Component1切换到Component2)。但只有在第一次渲染时才会触发。为什么？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRout
浏览 14提问于2019-09-18得票数 27
回答已采纳
2回答
我正在使用来自Apollo GraphQL的useMutation钩子，并且我想使用onCompleted属性来执行某个任务。基本上，我希望在useMutation成功完成时执行setCheck()钩子，并将check状态作为道具传递给子组件
const ParentComponent = () => {
const [ check, setCheck ] = useState(false)
const [ createMessage, { loading } ] = useMutation(CREATE_MESSAGE_MUTATION, {
onCom
浏览 18提问于2019-12-04得票数 0
回答已采纳
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
1回答
我是ReactJS的新手。我应该希望从其他组件中重新呈现一个组件。例如，我插入并显示了组件。我想在单击insert component的submits按钮后重新渲染显示组件。
显示组件：
import React from 'react';
import Fetch from 'react-fetch';
import styler from 'react-styling'
class Show extends React.Component {
render() {
return (
浏览 2提问于2017-08-04得票数 0
回答已采纳
我有一个React组件，看起来像这样：
class MyComp extends Component {
constructor(props) {
super(props);
this.state = {
myObject: this.props.myObject,
};
this.updateState = this.updateState.bind(this);
}
componentWillMount() {
this.updateState();
浏览 3提问于2017-10-09得票数 0
回答已采纳
一天半以来，我一直在移动一个函数，试图转换组件的样式，将每一张牌放在旋转的卡片组中。卡片正在旋转，但以前渲染的卡片的旋转值在每次重新渲染时都会更改。有谁能给我指个方向吗？谢谢，如果你看了沙盒，请原谅你会发现一碗意大利面。 My Code Sandbox import React, {useState} from "react";
import "./Card.css";
function Card(props) {
function animateCard(){
let angle = Math.random() * 90 - 45;
浏览 23提问于2020-11-21得票数 0
回答已采纳
2回答
我知道redux非常适合处理应用程序的全局状态，当该状态被更新以反映在视图中时。但是，有没有可能在不应该重新呈现的react组件上使用它？我有一张地图，它使用小叶，而不是重新渲染和绘制数据，我希望它绘制数据而不是重新渲染。
redux看起来是个不错的选择吗？如果是这样，我应该在哪里处理api调用，因为我被告知不应该在reducer中这样做。
目前，我的应用程序由一个导航栏、一个全屏地图和一个由api请求填充的搜索菜单组成。这个想法是，当选择一个搜索时，它会将数据填充到地图上。
浏览 2提问于2016-03-07得票数 1
我认为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
2回答
我有一个通过props接收数组或对象的React组件。我想做的事情是有一个事件重新排序这些道具。但是，似乎React重新渲染仅在state更改时发生。
现在，我已经在父对象中处理了排序，并将处理排序的方法作为一个prop传递，但理想情况下，我希望负责呈现这些对象的组件也能处理排序。
把props塞进state看起来不太好，但这里最好的做法是什么呢？
浏览 1提问于2015-03-31得票数 15
回答已采纳
我在react中使用gsap制作了一个自定义光标。我不能理解为什么当光标移动时会发生渲染，尽管我没有改变状态？
谢谢。
浏览 32提问于2020-02-08得票数 0
我正在尝试弄清楚为什么当我单击一个特定的组件时，它的同级组件也会呈现出来
function CountButton({increment, count, number}) {
console.log(`Render CountButton ${number}`)
return <button onClick={() => increment(count + 1)}>{count}</button>
}
function DualCounter() {
const [count1, setCount1] = React.useState(0)
c
浏览 14提问于2021-02-22得票数 0
我有一个问题，为什么子组件没有在3d时间重新渲染。 请看下面的代码，我有一个Parent组件，它有一个状态钩子，并通过setState函数来做Child组件。在Child中，它有一个超时，会在2秒后将状态更改为false。此外，当父组件或子组件渲染时，I console.log。 看到代码下面的控制台日志，我可以理解为什么两个组件都会重新渲染两次，以及当父组件第三次重新渲染时，但我不明白为什么子组件也会停止第三次重新渲染？ Code sandbox import React, { useState } from "react";
import ReactDOM from &#
浏览 17提问于2020-04-16得票数 0
1回答
React响应属性对象更改
、、、、
我正在寻找一种当React.Component的一个属性(对象)的内部状态发生变化时更新它的方法。 示例： export class ParentClass extends React.Component {
constructor(props) {
super(props);
this.someObject = new SomeObject();
}
...
render() {
return <ChildClass someObject=this.someObject />
}
}
浏览 36提问于2021-01-01得票数 0
我在互联网上发现了这一点："React组件在其状态或道具发生变化时自动重新渲染“，但如果我在道具中传递了一些不同于状态的东西，即使道具在时间上发生了变化，它也不会引发渲染。
在这段代码中，我传递了一个属性，但没有使用state
父级
import React from "react";
import Child from "./child";
export default function Parent() {
let count = 0;
setInterval(() => {
count++;
console.log
浏览 1提问于2020-05-03得票数 2
我的目标是让我的图库图像在加载时进行渲染。
通过在线查看，我了解了onLoad方法。
这就是我试图利用的，想法是preloader.gif将渲染直到图像加载，并简单地用加载的图像替换图像源。
就像现在(下图)一样，如果我不使用onLoad方法，图像似乎会以正常的方式加载，所以在图像加载之前，有一段时间根本没有图像被渲染。
我到底做错了什么？
我已经精简了代码以使问题更容易阅读。
import React from 'react';
import ReactDOM from 'react-dom';
import preloaderImage from '
浏览 0提问于2017-09-11得票数 6
回答已采纳
我从Flux文档中了解到，它建议对store引发的任何微小更改重新呈现视图。但是，如果我使用Flux而不使用React，这与通过虚拟DOM重新渲染完整视图和渲染只是不同会有什么不同呢？
如果我只想实现Flux而不实现React，那么不会为存储中的每个dam更改重新呈现完整的视图会成为性能瓶颈……？
浏览 0提问于2016-04-25得票数 0
我的react App上有一个嵌套组件。 class Home extends React.Component {
constructor() {
super();
this.state = {id : "1"};
}
render() {
return <ShowChart id={this.state.id}/>;
}
} 我从主页渲染组件ShowChart，并将this.state.id作为一个道具传递。ShowChart是一个带有redux connect()的组件。 class ShowChart extends
浏览 171提问于2021-05-02得票数 0
回答已采纳
在React应用程序中，我有一个带有多个手风琴的侧面板，用户必须向下滚动才能看到所有的手风琴。当我单击面板下方的按钮时，面板显示为重新渲染(刷新，看起来就像用户滚动回面板顶部一样)。有没有办法防止这种重新渲染，以便当用户单击按钮时，面板不会移动/滚动/重新渲染(以便用户正在查看的按钮和折叠面板仍然可见)？
我希望当用户单击面板下部的按钮时，面板不会重新呈现或滚动回顶部。
浏览 14提问于2019-10-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
