React setState未重新呈现组件
React是一个用于构建用户界面的JavaScript库，而setState是React组件中用于更新组件状态的方法。当调用setState方法时，React会根据新的状态重新渲染组件，并更新用户界面以反映这些变化。
但是，有时候调用setState方法并不会重新呈现组件。这可能是因为React会对多个setState调用进行批处理，以提高性能。React会将多个状态更新合并为一个更新，然后在适当的时机执行重新呈现。这意味着在同一个事件循环中进行多个setState调用可能只会触发一次重新呈现。
另外，React还会对新的状态与当前状态进行比较，如果它们没有发生变化，React可能会选择不进行重新呈现。这是为了避免不必要的性能开销。
如果你想确保重新呈现组件，有一些方法可以尝试：
- 在setState中使用回调函数：可以在setState方法中传递一个回调函数作为参数，该回调函数将在组件重新呈现后执行。例如：
this.setState(newState, () => {
// 在这里执行需要在重新呈现后执行的操作
});- 强制更新组件：可以使用forceUpdate方法来强制组件重新呈现。但是，这种方法并不推荐，因为它会跳过React的优化机制，可能会导致性能问题。
综上所述，setState方法在React中用于更新组件状态并重新呈现组件。在大多数情况下，React会对多个setState调用进行批处理，以提高性能。如果确保重新呈现组件，可以使用回调函数或者forceUpdate方法。更多关于React的信息和相关产品可以参考腾讯云的React相关文档和产品介绍页面。
相关·内容
即使shouldComponentUpdate()返回false，当使用setState()调用更新组件时，react如何为组件创建新的虚拟DOM？
react是否会为所有组件重新创建虚拟DOM，甚至是没有调用setState()的组件？我的意思是，假设对子组件调用setState()，是否也会为父组件反应一个新的虚拟DOM？
浏览 0提问于2019-06-05得票数 0
我曾经让这个代码在我的搜索组件上工作，但是在on submit被调用后，我收到了这个以前从未发生过的错误，有人知道吗？？
已超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
import React, { Component } from "react";
import axios from "axios";
import { Redirect } from "react-router-dom";
浏览 0提问于2019-05-07得票数 0
我一直得到：
警告:setState(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用setState()。这是禁止行动。请检查SearchInput组件的代码。
我试过以下几点：
问题很简单:当用户输入输入字段时，通过onChange属性和setState捕获输入
import React, { Component } from 'react';
class SearchInput extends Component {
constructor() {
super();
this.state = {
inputVa
浏览 3提问于2016-11-06得票数 1
为什么react必须使用setState更新状态(树调节)。而不是简单地初始化this.state.color = 'red'；假设以前的颜色值是‘绿色’。
浏览 1提问于2018-11-01得票数 12
回答已采纳
我正在尝试使用useRef viz清除react表组件的filtered状态。ref.current.setState({...})。这是我的组件中的一段代码：
const Customers = (props) => {
const customerTableRef = useRef()
useEffect(() => {
const customerTable = customerTableRef.current
if (customerTable) {
customerTable.setState({ ...customerTable.s
浏览 4提问于2020-03-17得票数 0
1回答
我遇到了一个奇怪的问题，我可以弄清楚为什么会发生。
这不应该发生，因为传递给History组件的道具还没有更新。
./components/History.js y.js
...
const History = ({ previousLevels }) => {
return (
<ScrollView style={styles.container}>
{previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
retur
浏览 0提问于2018-07-28得票数 0
回答已采纳
2回答
const Greeting = () => {
console.log("Greeting is called");
return <h2> Hello World </h2>;
}
class Counter extends React.Component{
constructor(props){
console.log("Counter is called");
super(props);
this.state = {
coun
浏览 1提问于2018-08-23得票数 1
回答已采纳
为了更新子组件中的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
2回答
在下面的场景中，Child作为children传递给App，并作为其子级直接在App中声明。现在的行为是，当Child被呈现时，作为children传递的App不会render。这是有意义的，因为它是从顶部传递的，所以如果在顶部发生状态改变，那么它也会有re-rendered。
const {useState,useEffect} = React;
function App({children}) {
const [state,setState] = useState(0);
return (
<div className="App">
浏览 5提问于2021-04-11得票数 1
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
一旦this.setState()被调用，React组件是否会对其state进行一些检查，以查看state是否已更改。因此，在调用componentDidMount之后，将不再有一个协调阶段，如下面的代码所示：
// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))
或者我需要手动执行这些检查，例如：
const width = getViewportWidth()
if (this.state.width !== wi
浏览 1提问于2018-01-05得票数 2
我有一个有2个子组件的组件。
React.createClass({
getInitialState: function(){
return {ch_1 : 'Child 1', ch_2: 'child_2'};
},
_onChange : function(e){
var value = e.target.value;
var id = e.target.id;
if(id == '1'){
this.setState({ch_1 : value})
浏览 0提问于2017-05-24得票数 0
问题是：
如何获得引用(作为ReactElement而不是DOM)，在一个节点中，带有螺旋桨引用.
示例，在下面
将类MyTable呈现为：
<table ref="myTable">
{this.state.list.map(name=>
<AddVarTableRow key={name} myName={name}/>
)}
</table>
在componentDidUpdate，想要这样做：
React.Children.forEach(this.refs.tbody.props.ch
浏览 0提问于2016-03-11得票数 0
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
我总是在API's生命周期中发出ComponentDidMount请求，并在回调中调用setState。但是，在深入挖掘时，我碰巧发现，我们不应该在这个生命周期中调用setState，因为它再次触发呈现方法，而且React也不建议这样做。
那么，在这种情况下，我们应该在哪里提出请求，然后调用setState来使用结果呢？
浏览 0提问于2019-03-05得票数 2
回答已采纳
2回答
我从这个例子中学到了这一切。
所以我不能接受任何荣誉。然而，这个页面工作得很好。我正试着把它改造成一个React Video Player页面。
我的代码如下(摘自Axios Post)：
if (response.status == 200) {
console.log("Login successfull");
var videoPlayer = [];
this.setState( {isLoggedIn : true });
videoPl
浏览 2提问于2018-05-05得票数 0
1回答
我正在从getCount函数的孩子那里得到道具。把它设为州。而不是把它设置在组件中，得到无穷大的循环。我怎么才能解决呢？
有父组件的代码：
import React, { Component } from "react";
import Message from "./Message/Message";
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
color: {
浏览 0提问于2018-06-26得票数 0
回答已采纳
2回答
我有一个具有以下结构的React应用程序：
组件A由B和C组成
如果我在组件setState中调用B，是否也会通知组件A和C (这意味着它们至少也将重新呈现进入对账阶段)？
浏览 2提问于2018-01-18得票数 0
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
2回答
我有一个Main.js组件，它可以路由到各种组件，包括Listing.js。
Main:它包含一个添加到购物车中的产品数组作为状态。
清单:这是产品清单。它包含数据库中的所有产品作为状态。
My problem:当我通过单击List组件中的按钮将产品添加到购物车中时，它会将产品添加到购物车中，更新主组件的状态购物车。这样做，列表组件重选器，我就松开了访问者在清单上设置的所有过滤器。
当它的父组件的cart状态发生变化时，我希望防止List从rerender。你知道怎么做吗？我试过使用shouldComponentUpdate，但没有成功。
Main.js (父组件)
imp
浏览 1提问于2019-10-31得票数 0
回答已采纳
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
在本例中，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
回答已采纳
上下文
我正试着用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
回答已采纳
React是在状态或propr保持不变时呈现的。我不明白它为什么要重新更新/更新，因为结果不会改变
class A extends Component {
render() {
console.log("Hello")
return "Foo";
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = { a: "ASDA" };
}
render() {
return (
浏览 4提问于2020-03-22得票数 3
回答已采纳
下面是一个简单的例子：
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
回答已采纳
每次调用setState()时是否重新呈现所有组件和子组件？
如果是，为什么？我认为，当时的想法是，只有在状态发生变化时，才能做出尽可能少的反应。
在下面的简单示例中，两个类在单击文本时都会再次呈现，尽管在随后的单击中状态不会改变，因为onClick处理程序总是将state设置为相同的值：
this.setState({'test':'me'});
我原以为只有当state数据发生更改时，才会出现呈现。
下面是示例和嵌入式代码段的代码：
var TimeInChild = React.createClass({
render: function()
浏览 17提问于2014-07-13得票数 641
回答已采纳
我尝试在App.js中为经过身份验证的用户添加受保护的路由，但react元素被多次呈现。下面是我的App.js代码 class App extends Component {
constructor(props) {
super(props);
this.state = {
currentUser: null,
isAuthenticated: false,
isLoading: false
}
}
async loadCurrentUser() {
this.setState({
isLoading
浏览 53提问于2021-04-09得票数 2
回答已采纳
1回答
我有下面的脚本。我是运行在一个个人电脑上使用创建-反应-本机应用程序。控制台给我以下警告。我不知道该怎么对付他们。
以下是警告：
Warning: componentWillReceiveProps is deprecated and will be removed in the
next major version. Use static getDerivedStateFromProps instead.
Please update the following components: TouchableOpacity
Learn more about this warning here
浏览 0提问于2018-04-13得票数 2
回答已采纳
1回答
我正在构建一个带有多个选项卡的核对表应用程序。它可以工作，但当列表变得更大时，当我想检查1项时，它就不会执行得非常快。我觉得这是因为当我只想更新1项时，整个状态(包括所有选项卡中的所有项)都会被更新。选项卡和项是动态生成的(例如，编译时我不知道会有多少选项卡)。你知道怎样才能更有效地完成这件事吗？这是(剥离的)状态提供程序：
export default class InpakStateProvider extends React.Component {
state = {projectName: " ", tabs: [{name: " ", items:
浏览 5提问于2022-04-30得票数 1
据我所知，React.memo是一个回忆录组件的API :如果它的道具不改变，则使用该组件的最新呈现，而不将其与以前的版本进行比较。跳过新的渲染和比较旧的一个加速应用程序。凉爽的。
现在，我不明白的是:如果道具不改变，那么没有回忆录的组件也不会重新呈现，正如我从中看到的(使用这个链接查看演示，这个页面上的代码片段有点混乱)：普通component+usecallback和回忆录one+useCallback之间的呈现数量没有区别。基本上，useCallbacks是我所需要的，因为普通组件不会用相同的道具重新呈现。那我错过了什么？备忘录什么时候来帮助优化？
const { useCallba
浏览 12提问于2022-06-27得票数 2
回答已采纳
我正在尝试使用React js中的Recharts来构建一个条形图。我使用fetch调用从API获取数据，并将其转换为array.But，当它显示barCharts时，它将变为空白。
有人能帮我指出哪里出了问题吗？
var data1=[];
class BarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date(),
endDate: new Date(),
count: false
浏览 2提问于2019-04-23得票数 0
我想通过使用自定义钩子来更新我的组件的当前状态，但是当我更新它时，会显示无限循环渲染。通过使用useState()钩子。我是第一次接触react hooks。 import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';
con
浏览 58提问于2020-07-01得票数 0
回答已采纳
因此，我知道React中的设置状态是异步的，我们设置的状态如下：
this.setState(previousState => {
return { /* some new state that uses `previousState` */ }
});
所以我的问题是:如何取消一个this.setState**?** ，假设我使用previousState来确定我不需要呈现一个更新。我如何取消setState和告诉反应，不重新渲染任何东西。
this.setState(previousState => {
if (/* previousState is fine */)
浏览 0提问于2017-09-06得票数 14
回答已采纳
我使用react创建了一个类似于twitter的对话框。我查看了react文档，发现了几个组件生命周期，但不确定应该使用哪一个来提高代码性能：componentDidMount或componentWillMount
当我在文本框中键入内容时，会在控制台中看到打印文本框值的更新。谁能告诉我在这种情况下应该使用哪种方法以及在什么时候使用？
class TwitterBox extends React.Component {
constructor(props) {
super(props);
this.state = { enteredTextBoxvalue : '
浏览 0提问于2017-05-29得票数 0
我正在尝试使用上下文API进行一些状态管理；我想要实现的是，当我到达特定的路由时，我从服务器加载数据，将其存储在上下文中，并在页面本身中显示数据。这导致了一个无限循环，其中对服务器的请求是一次又一次地完成的(并且永不停止)。
我试图为提供者和消费者逻辑使用更高级的组件：
import React, { Component, createContext } from 'react';
import RequestStatus from '../RequestStatus';
import { getData } from '../Api';
c
浏览 0提问于2019-01-16得票数 2
回答已采纳
我试图在验证表单时显示警告。问题是，在验证过程中发生错误时，我希望显示父组件中定义的警报--这会导致submiting /重新加载表单，而e.preventDefault()不足以停止子处理。我已经发现，setState通过道具会导致提交，但我不知道如何通过setState来阻止提交。这个案子我能做什么？我认为Router有一些共同之处，因为这种机制不需要使用路由。下面是一些代码：
App.js (父组件)
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router,
浏览 1提问于2021-05-06得票数 2
回答已采纳
我被告知React的纯组件可以有state，也可以用setState来改变它。有状态的组件被称为“纯”的感觉是错误的。这是正确的吗？如果是这样的话，它怎么会是纯的？
如果重要的话，我说的是从PureComponent类扩展并使用setState方法的基于类的组件。
浏览 0提问于2019-08-06得票数 0
回答已采纳
我们正在使用react-router-dom配置项目。我创建了一段代码，使图标根据呈现的页面而有所不同，但在setState部件中发生了无限循环。帮帮我。
class Bottom extends React.Component {
state = {
iconName : 'initialIconName'
}
setIconName = (name) => {
this.setState(() =>({
iconName: name
}))
}
render() {
const odd
浏览 0提问于2019-05-10得票数 0
4回答
在下面的示例中，我使用一个ES6映射作为React中的状态值：
class App extends React.Component {
constructor(props) {
super(props);
const results = new Map();
results["group1"] = [{ value: "..." }, { value: "..." }];
this.state = { results };
}
onUpdateClick(i) {
this.state.r
浏览 8提问于2020-06-19得票数 3
6回答
父组件(在我的示例中是MyList)通过子组件(MyComponent)呈现数组。父级决定更改数组中的属性，触发子重呈现的反应方式是什么？
在对数据进行调整之后，我想出了父母中的this.setState({});。这是一种黑客攻击还是引发更新的反应方式？
JS Fiddle：
var items = [
{id: 1, highlighted: false, text: "item1"},
{id: 2, highlighted: true, text: "item2"},
{id: 3, highlighted: false, text:
浏览 11提问于2015-05-04得票数 69
回答已采纳
我在读react.js的官方文档。这是他们的。
我对这一段感到困惑：
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。如果正在使用可变对象，并且不能在shouldComponentUpdate()中实现条件呈现逻辑，那么只有在新状态与前一状态不同时才调用setState()将避免不必要的重新呈现。
问:如果使用可变对象，并且条件呈现逻辑不能在setState()中实现，为什么调用shouldComponentUpdate()将避免不必要的重呈现。
浏览 1提问于2018-05-04得票数 0
我已经创建了一个组件componentDidMount()数据，它具有从API获取数据的函数。之后，我将其导入到主组件中。主组件有一个呈现方法，其中我有一个简单的结构:第一个div -一些信息和导入的组件数据，第二个div是一个按钮，它打开一个模型，它有一些文本和按钮关闭这个模式对话框。我已经读过，componentDidMount()只在组件呈现后被调用一次。但是当我同时按下按钮打开我的模态页面时，componentDidMount()又被调用了。我需要的是，当我打开模态框时，componentDidMount()不会运行。但只有在呈现或刷新页时才运行。
主组件
import React f
浏览 1提问于2020-03-19得票数 0
回答已采纳
我正在使用redux应用程序在我的反应中尝试单元测试。因此，我需要测试连接的组件，不幸的是，我得到了这个错误：
无法读取未定义的属性“contextTypes”--我在单元测试中使用酶--这里是我的组件：
import React from 'react';
import TextFieldGroup from '../common/TextFieldGroup';
import validateInput from '../../server/validations/login';
import { co
浏览 5提问于2017-01-31得票数 5
回答已采纳
我试图用状态中已经存在的数据呈现一个组件(从redux- state.login.user中提供)，其中的数据是持久化的(我可以在被调用的mapStateToProps函数的console.log中看到它，并返回dataObject : state.login.user，但是dataObject没有被更新，因为componentWillReceiveProps没有被调用。
你能告诉我我哪里做错了吗？
import React from 'react'
import { connect } from 'react-redux'
import { ScrollVie
浏览 0提问于2017-06-21得票数 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
回答已采纳
5回答
我正在创建一个简单的应用程序，但我在重新渲染子组件时遇到了问题。当在父组件(App)中调用setState时，向下传递给子组件(CardContainer)的属性不会导致它重新呈现。我知道我需要以某种方式使用应用程序中的函数来调用CardContainer中的setState，但我对如何做到这一点感到困惑。应用程序中的状态肯定会发生变化(它显示在console.logs中)，但我需要CardContainer在应用程序状态更改为时重新呈现它所映射的数组。有什么想法吗？谢谢!
下面是App代码(父组件)：
import React, { Component } from 'react&#
浏览 72提问于2018-06-03得票数 0
2回答
我希望select标记能够根据这个用state.value支柱更新所选的值。
父组件将title作为props传递给这个组件，问题是我得到了这个错误：
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我不明白为什么循环循环。你能帮我一下吗？
import React, {Component} from 'react'
class BookShelfChanger extends Component {
浏览 0提问于2018-07-24得票数 0
我正在使用reactjs，下面是我所做的工作:从API中检索数据并使用axios显示数据以调用API。我知道axios调用是异步的，并且是基于承诺的。
我的理解是，在react中，'setState‘只能在组件挂载(发生在componentDidMount中)之后调用。所以对API的调用是在“componentDidMount”中进行的。
我不清楚的是:为什么要这样做，为什么要显示数据？
我正在读，它在'componentDidMount‘完成之前就被解雇了
因此，考虑到'componentDidMount‘之前的’呈现‘这个事实，我很困惑为什么数据加载并显示得很好？
浏览 8提问于2020-05-24得票数 0
回答已采纳
我试图理解在react中基于类的组件。我偶然发现了这些生命周期方法。我只是想了解一下componentDidUpdate()
据我所知，只有在this.setState被调用时，react组件才会重新呈现。因此，理想情况下，只有在触发某些componentDidUpdate时才会调用setState？
此外，请纠正我的理解，如下所述：
componentDidUpdate()不同于useEffect()，因为如果更改了依赖数组的任何元素，useEffect就会自动重新呈现，但是componentDidUpdate可能永远不会单独触发呈现(除非我们在其中调用this.setState() )。
浏览 22提问于2021-09-28得票数 1
回答已采纳
代码的输出如下：
render
after setState
render
setTimeout after setState
为什么在handleClick()之后和setTimeout回调函数之前调用render()？render()被调用的确切时间是多少？
var React = require('react'),
ReactDOM = require('react-dom');
var HelloWorld = React.createClass({
getInitialState:function(){
浏览 2提问于2016-04-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
