为什么这个函数组件在setState之后没有重新渲染？
在React中，函数组件是一种纯粹的组件形式，它没有内部状态和生命周期方法。因此，函数组件在调用setState后不会自动重新渲染。
在React中，组件的重新渲染是由组件的状态(state)或属性(props)的改变触发的。当调用setState时，React会将新的状态合并到组件的当前状态中，并触发组件的重新渲染。但是，对于函数组件来说，没有内部状态，因此调用setState不会引起重新渲染。
如果希望在函数组件中实现重新渲染，可以使用React的钩子函数useState来创建一个状态，并在需要重新渲染时更新该状态。例如：
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increase Count</button>
</div>
);
}在上面的例子中，我们使用useState钩子函数创建了一个名为count的状态，并通过setCount函数更新该状态。每次点击按钮时，count的值会增加，并触发组件的重新渲染。
需要注意的是，函数组件的重新渲染是基于浅比较的，即只有当状态或属性的值发生真正的改变时，才会触发重新渲染。如果在setState中传递的值与当前状态相同，React会认为没有发生变化，不会触发重新渲染。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（云原生）：https://cloud.tencent.com/product/scf
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（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/umeng
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体处理（GS）：https://cloud.tencent.com/product/gs
相关·内容
2回答
我有一个React类组件，它在默认情况下呈现null，并在调用activate()函数后呈现一些子级。大致如下：
class MyComponent extends React.Component {
...
activate() {
this.setState({showComponent: true})
}
...
render() {
if (this.state.showComponent) {
return <Child />
} else {
浏览 1提问于2021-04-24得票数 0
1回答
我在渲染器中有一个handlePageClick函数，如下所示：
onPageChange={this.handlePageClick}
这些函数是：
handlePageClick = data => {
this.setState({
circleloading: true
});
let names = ["page"]
let values = [data.selected]
this.updatePublications(names,values)
}
由于某种原因，当我这样做的时候，函数会被无限地调用
浏览 0提问于2020-01-19得票数 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
回答已采纳
我刚刚发现，在react中，任何组件中的this.setState()函数都是异步的，或者是在调用它的函数完成后调用的。
现在我搜索并找到了这个博客()
在这里，他发现setState是异步的(当堆栈为空时调用)还是同步的(调用时立即调用)，这取决于状态更改是如何触发的。
现在这两件事很难消化了。
在博客中setState函数在function updateState中被调用，但是被调用的函数不知道是什么触发了updateState函数。为什么他们要让setState异步，因为JS是单线程语言，而这个setState不是WebAPI或服务器调用，所以只能在JS的线程上完成。他们这样做是不是为了
浏览 48提问于2016-03-18得票数 161
showScrollToTopView = () => {
const { showScrollToTopView } = this.state
const DEVICE_HEIGHT = Dimensions.get('window').height
if (this.scrolledValue >= 2 * DEVICE_HEIGHT - HEADER_HEIGHT && !showScrollToTopView) {
this.setState({
浏览 1提问于2021-01-07得票数 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
回答已采纳
我从"ComponentDidMount“函数中提取数据，并将它们加载到我的状态中。在我进行控制台操作之后，立即记录值并查看所有内容。然而，当我试图以同样的方式在我的渲染函数的返回中访问状态时，我将得到"undefined“。 public componentDidMount() {
sp.web.lists.getByTitle("alert").items.get().then((item) => {
this.setState({items: item})
console.log(this.state.items[0].Title) //w
浏览 14提问于2020-06-23得票数 1
回答已采纳
不建议再使用componentWillMount，所以我对这种行为不太熟悉。然而，在我的项目中仍然有一些采用componentWillMount的遗留代码。当我深入研究它时，我发现这个奇怪的行为，redux存储的变化并没有立即反映在第一次渲染中。 我在以下部分简化了代码(有关codeSandBox runnable的完整代码可以在here中找到) 在本例中，我尝试在componentWillMount中设置本地状态和redux存储。根据React生命周期顺序，我应该能够在第一个render()中查看这两个值。 componentWillMount() {
this.setState(pr
浏览 18提问于2021-04-27得票数 1
1回答
我想用从子组件获得的值来更新状态，但是由于某种奇怪的原因，如果我在我的方法中使用setstate，我会得到循环错误。下面是我的代码片段：
class ParentTab extends Component {
constructor(props) {
super(props);
this.state = {
displayVal : '0',
};
}
totalRec = value => {
console.log('value', value); // will show the value
浏览 1提问于2018-03-04得票数 0
1回答
我有一个react + flask网站。前端创建到后端的socketio连接，之后后端定期发送数据供前端更新。数据是一个单独的字典。在每次更新时，我必须在UI中更新一个表。 下面是一个伪代码： function Table ({data}) {
const [dataTable, setDataTable] = useState(data);
useEffect(() => {setDataTable(data)}, [data]);
const createTable = () => {...};
return cr
浏览 9提问于2020-12-12得票数 0
回答已采纳
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
3回答
代码A： componentDidMount(){
this.dateString = this.props.navigation.getParam('dateString', moment());
} 代码B： state = { dateString: moment() }
componentDidMount(){
const dateString = this.props.navigation.getParam('dateString', moment());
this.setState({ dateString })
} dateStr
浏览 25提问于2019-01-18得票数 0
我目前有一个下拉select来过滤'Apply‘之后的一些图表。它工作得很好(见下面的截图)。
问题是，当选择了另一个timespan时，React会在我单击“Apply”按钮之前重新呈现所有图表。
我想通过实现shouldComponentUpdate来避免这种不必要的重新渲染，但是我不知道该怎么做。
下面是我尝试过的，但它不起作用(仍然是一个重新渲染)：
shouldComponentUpdate(nextState) {
if (this.state.timespanState !== nextState.timespanState) {
浏览 3提问于2021-10-12得票数 0
我有一个Header组件，它返回带有console.log的固定文本
const Header = props => {
console.log("header render");
return (
<header>
<h1>header</h1>
</header>
);
};
在我的父组件中，我有一个名为changeTab的函数，用于更改选项卡并将其设置为状态：
class App extends Component {
state = {
tabs: {
浏览 0提问于2019-11-29得票数 0
我有一个react组件，它映射一个对象数组，然后在屏幕上显示这些对象的内容。这可以很好地工作，但是当我检查componentDidMount生命周期方法中的ul子级时，它是一个空数组，然而，一秒钟之后，它包含了所有项。
有没有人知道我怎么才能等到一切都渲染好了？
我尝试过componentDidUpdate，但由于有一个setInterval方法定期运行，所以触发的频率太高了。
componentDidMount() {
// this is an empty array here
console.log(this.items.children);
setInterv
浏览 0提问于2017-11-29得票数 1
React文档说：React is pretty flexible but it has a single strict rule: all React components must act like pure functions with respect to their props.
为什么会这样呢？
我猜如果你直接改变属性的值，组件不会重新渲染，这就是我们必须使用setState的原因。但我仍然不明白这背后的原因。为什么组件就其道具而言必须类似于纯函数？
浏览 26提问于2018-07-20得票数 11
回答已采纳
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
如果您要记录每个组件的呈现的开始和结束，它们将独立于它们呈现的子组件开始和结束。为什么子渲染不能在父渲染的开头和结尾进行渲染？
谢谢!
浏览 4提问于2017-07-22得票数 0
在我的组件构造函数中，我加载了一个“里程碑”列表，以及某人戒烟后的天数。里程碑是硬编码的，并且同步加载。天数是从AsyncStorage加载的。我的组件为每个进度条进度为this.state.days / milestone.duration的里程碑呈现一个AndroidProgressBar。在呈现期间，异步返回天数，并使用setState({days})更新状态。我认为更改后的状态不会触发重新渲染，因为它处于原始渲染的中间。这会导致大多数里程碑的进度条不正确。
我已经遍历了调试器，我可以看到天数在最后两个里程碑呈现之前更新了，只有它们是正确的。
这是我的组件。
import React,
浏览 0提问于2018-04-06得票数 0
我想检查一下当你多次使用this.setState时会发生什么(为了讨论起见，使用了2次)。我以为组件会被渲染两次，但显然它只渲染了一次。我的另一个期望是，也许对setState的第二个调用会超过第一个调用，但你猜对了-工作得很好。
链接到
var Hello = React.createClass({
render: function() {
return (
<div>
<div>Hello {this.props.name}</div>
<CheckBox />
</
浏览 0提问于2015-11-10得票数 124
回答已采纳
2回答
我是个新手，对某些事情不太了解。我有两个组件:父函数和子类组件。假设，我需要从FC传递来自useState钩子的非常简单的数组。在构造函数的class组件中，我尝试注销props --结果是空数组。但在组件中渲染数组项成功。如果我不使用-array钩子并传递现有useState - console.log(props)结果，则该数组。为什么会发生这种情况？我认为它与异步操作相关，但是如果需要在基于props的构造函数中定义初始状态呢？因为道具没有定义，所以我不能这么做。С你能帮我弄清楚吗 const FunctionalComponent = () => {
const [sta
浏览 15提问于2020-08-22得票数 0
回答已采纳
我已经寻找了一段时间，但似乎找不到这个问题的具体答案。我已经遇到过很多次了，并通过使用"hacky“解决方案来克服它们。在设置父状态时，避免重新渲染子组件的推荐/标准方法是什么？ 我已经做了一个非常简单的例子来说明这个问题，其中我们有一个带有计数状态的左侧子组件和一个右侧子组件，当单击左侧的按钮时，它会显示文本。 Example.js import React, { useState } from "react";
import "../css/pages/Example.css";
function Example() {
const [ri
浏览 25提问于2021-01-30得票数 1
回答已采纳
每次在React.js中执行渲染时，UI都会滚动到页面顶部。
JSFiddle：
有什么好的或被动的方法来阻止这种情况吗？
例如，如果用户向下滚动页面，然后按下导致呈现的按钮，则UI将停留在与以前相同的滚动位置。
// Forces a render which scrolls to top of page
this.setState({data: data});
更新:为什么某些渲染的UI会滚动到顶部，而其他渲染则不会？
浏览 46提问于2015-05-21得票数 42
回答已采纳
在研究上下文时，我不止一次偶然发现了一个常见的模式：
const storeContext = React.createContext()
const Provider = (children) => {
const [state, setState] = React.useState();
const ctxValue = React.useMemo(() => [state, setState], [state]);
return (
<storeContext.Provider value={ctxValue}>
{child
浏览 1提问于2021-05-27得票数 2
我是react的初学者，我正在学习生命周期挂钩。我看到一些文章说不要在componentDidMount中同步调用setState。但我们可以setState in，然后阻止承诺。 提到的原因是setState将导致组件的重新呈现，这将影响性能。 我的问题是，即使我在setState内部写了promise块，re-render无论如何也会在那里，而且setState是异步的，所以它不会立即被调用。那么，为什么不建议在componentDidMount内部同步调用setState，如果有的话，在内部写代码是如何解决这个问题的呢？ PS： 我研究了很长一段时间，但找不到不同步调用setState
浏览 334提问于2021-02-13得票数 1
回答已采纳
根据该链接：
可以使用new props触发render()。有没有人能给我举个代码例子？我看不出道具是如何改变调用渲染的！请不要通过状态更改属性；然后调用render()的是setState() ...
浏览 2提问于2019-10-11得票数 0
2回答
我不能从子组件重新渲染父组件-我将componentDidMount作为道具传递给子类，然后在那里调用它，并期望父组件重新渲染。render函数被调用，但内容保持不变。怎么了？
var Parent = React.createClass({
getInitialState: function () { return {content: 'clean'}; },
componentDidMount: function () {
this.setState({content: 'changed!'});
},
render: f
浏览 13提问于2016-08-23得票数 0
我使用以下代码：
handleOwnerMode = ownerChecked => {
this.setState(prev => ({ ownerChecked, showOwner: !prev.showOwner}))
// this.setState(prev => ({ ownerChecked: !prev.ownerChecked, showOwner: !prev.showOwner }))
}
在渲染中是
<Switch onChange={this.handleOwnerMode} checked={this.stat
浏览 1提问于2019-03-26得票数 0
回答已采纳
3回答
我刚开始反应...
此代码仅在3秒后使用布尔值呈现。
但是下面的代码一直在渲染..渲染..正在渲染...几乎每三秒一次。
import React, { useState } from "react";
const App = () => {
const [isLoading, setIsLoading] = useState(true);
setTimeout(() => {
setIsLoading(!isLoading);
}, 3000);
return <h1>{isLoading ? "Loading&#
浏览 32提问于2021-02-19得票数 0
回答已采纳
2回答
我是个新手，我有个问题。我有两个组件，父组件- Goals和子EditGoal。goals组件呈现所有目标，end EditGoal组件编辑目标的名称。子组件完成修改后，它将数据保存在数据库中，并通过props执行父组件中的函数。该函数设置状态。这应该会导致父组件重新呈现。但是出于某种原因，父组件不会重新呈现。我不知道为什么。我想要重新渲染父组件的原因是，我可以获得一个带有更新的目标列表，这是由一个子组件创建的。你知道为什么父组件不能重新渲染吗？或者我怎样才能绕过它？如果有任何建议，我将非常感谢！
目标组件：
import React, { Component } from 'reac
浏览 0提问于2018-02-09得票数 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
回答已采纳
我是第一次接触reactjs。我的render方法每次都会从数据库中获取数据，并停止所有其他活动的运行。它每毫秒获取一次数据，但没有其他功能在运行，比如设置状态etc.how从数据库获取数据，并并行执行其他任务，如设置状态并将数据分配给数据库。我使用的是firestore，所以如何同时从数据库获取数据和将设置数据分配到数据库。 db.collection(this.state.user.email).doc(this.state.hisemail).get().then(docr =>{
// console.log(docr.data())
浏览 25提问于2020-09-02得票数 0
我有一个父组件A，它计算子组件B的一些初始值。实际上，我在组件A的componentDidMount()中计算初始值，并通过props将其传递给B： <ComponentB initialValue={this.state.value} handleChange={this.handleChange}/> 而在组件B中，我做到了 this.state = {value: this.props.initialValue} 在此之后，组件B应该独立管理他的状态。但每次它的值改变时，我希望它更新A的状态，但包含的信息更少。 在组件B中： const onChange = (event)
浏览 21提问于2020-10-29得票数 0
回答已采纳
我有一个名为onRemove的函数，其编写方式如下：
const [todos, setTodos] = useState(todoData);
const onRemove = useCallback(
(id) => {
setTodos(todos.filter((todo) => todo.id !== id));
},
[todos]
);
然后我注意到改变它的功能会缩短渲染时间。
const onRemove = useCallback(
(id) => {
setTodos(todos => t
浏览 5提问于2020-04-25得票数 9
我有一些带有json的URL，需要读取数据。在这个例子中，json看起来像这样：
{
"results": [
...
],
"info": {
...
}
}
我希望将获取的数据作为组件的属性返回。做这件事最好的方法是什么？我试着用axios做到这一点。我设法获取了数据，但是在setState ()方法中的渲染之后，我收到了一个空对象。代码如下：
export default class MainPage extends React.Component {
constructor(props:
浏览 0提问于2017-12-10得票数 1
父级的clickHandler()函数是从它的子级调用的，在执行setState()函数之后，如果下一行执行了一些其他任务，会发生什么？ export default function App() {
const [state, setState] = useState("initial state");
const clickHandler = (e) => {
console.log("onclick", state);
setState(e.target.innerText);
console.log("o
浏览 16提问于2021-02-05得票数 0
我试图在图像加载后获取它的高度，并将其发送回父组件，但这会导致无限的重新渲染。
这是我的代码的原型：
import MyImage from './images/myImage.jpg';
class Image extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 0
}
}
getHeight = (e) => {
const heigh
浏览 2提问于2018-03-24得票数 0
2回答
我需要把文本放进两行。我有反应组件，但我不能得到更新的高度，只有高度后，元素呈现。这是我的组件
constructor (props) {
super(props)
this.state = {
text: props.text
}
}
componentDidMount() {
let element = ReactDOM.findDOMNode(this)
let parent = element.parentNode
let originalText = element.innerText
let con
浏览 3提问于2017-09-10得票数 1
回答已采纳
假设我目前有一个带有状态{random: 1}的React组件。如果我打电话
this.setState({random: 1})
它会触发重渲染吗？如果是这样的话，在调用setState时是否可以阻止重新呈现，但是状态不会这样改变？
浏览 0提问于2021-01-07得票数 0
回答已采纳
我已经阅读了关于reactjs.org有关getDerivedStateFromProps的文档。我看过用例。我也明白为什么要用它。
，但我不知道它是如何处理返回值的。所以我的问题，当它回来的时候..。它去哪儿了？
它没有setState，因为它没有访问这个的权限。
要设置状态，需要使用componentDidUpdate并查找更改，然后设置状态。
假设以下代码：
public static getDerivedStateFromProps: IArrowFunction = (nextProps: IMyContainerProps, prevState: IMyContainerState
浏览 1提问于2019-03-05得票数 4
回答已采纳
4回答
我尝试用react呈现一个组件列表，组件正在更新这个元素数组，但没有对它们重新排序。
伪码；
class Form extends Component {
//
// .... other initialization code and logic
//
updatePositions() {
//
// re-order this.state.page.page_contents
//
this.setState({ page: this.state.page });
}
renderContents() {
return
浏览 0提问于2019-05-29得票数 1
2回答
我有一个组件，看起来像这样：
class Table extends Component {
constructor(props) {
super(props);
this.columnDefs = columnDefs;
this.state = {
isLoading: true,
showTimeoutModal: false,
tableData: [],
currentDate: null
};
}
componentDidMount() {
this.fetchData();
浏览 1提问于2019-12-14得票数 0
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 2
回答已采纳
1回答
重新选择如何影响组件的渲染
、、、、
我真的不明白重新选择是如何减少组件的渲染的。这是我在没有重新选择的情况下得到的：
const getListOfSomething = (state) => (
state.first.list[state.second.activeRecord]
);
const mapStateToProps = (state, ownProps) => {
console.log(state.first.list, state.second.activeRecord);
return {
...ownProps,
listOfSomething: getList
浏览 4提问于2017-03-30得票数 1
1回答
当我点击3个有条件渲染的组件时，我试图在它们之间转换。我正试图通过在react-transition-group中使用TransitionGroup来实现这一点。这就是我到目前为止所知道的： <div className="transitionContainer">
<Transition in={this.state.validFiles && this.state.dotted} timeout={duration}>
{state => (
<>
浏览 25提问于2020-04-02得票数 0
5回答
我不知道为什么我的React组件渲染了两次。因此，我从params中提取了一个电话号码，并将其保存到state中，以便我可以通过Firestore进行搜索。一切似乎都很好，除了它渲染了两次...第一个呈现电话号码和零点。第二次渲染时，所有数据都会正确显示。有人能帮我找到解决方案吗？
class Update extends Component {
constructor(props) {
super(props);
const { match } = this.props;
this.state = {
phoneNumber: match.params
浏览 5提问于2018-02-18得票数 30
在react的文章()中，有以下内容：
在这种情况下，参考文献可能很有用，但通常我们建议您尽量少使用它们。即使在演示中，这个命令式方法也不是理想的，因为2将呈现而不是一个.。
下面是演示的相关部分
handleChange = index => {
this.setState({ selectedIndex: index }, () => {
const selectedAccount = this.props.accounts[index];
this.inputRef.current.resetEmailForNewUser(select
浏览 0提问于2021-10-19得票数 2
我试过这种模式。
ParentComponent
...
render(
return <ChildComponent newProps="newPropsValue />)
ChildComponent
...
ComponentWillReceiveProps{
this.setState({"propsKey": "newPropsValue"})
}
据我所知，初始组件呈现是由道具更改触发的，而且由于setState是异步的(出于某种原因)，第一次就不会执行带有新状态更新的呈现。
然而，我不明白的是，为什么当它最终决定更新状态时，它
浏览 3提问于2017-08-12得票数 2
我是react世界的新手，我试图从axios调用中获取用户数据，并试图在react的渲染执行之前获取数据。
如何调用此组件
<Route path="/users" render={(props) => <User {...props}/>} />
下面是我的组件类
class User extends React.Component {
constructor(props) {
super(props);
this.state = { authenticated: false }
this
浏览 1提问于2020-08-28得票数 0
这个问题适用于基于类和基于函数的组件。这可能是一个太简单的问题，但由于某些原因，我找不到一个简洁明确的答案，所以我有时会被抛在脑后。我所能找到的就是“组件重新渲染”，但它到底是什么意思呢？呈现是重新检查组件的状态以描述如何绘制DOM，但它是否也重新定义了组件中任何引用的数据类型？或者它只会重新调用Class组件上的render()方法？
在功能组件中。它是否意味着'languages‘数组，'updateLanguage’函数，以及我可能放入的所有东西都被重新定义了？或者只返回在返回体中定义的内容？(如内联箭头处理程序，等等)。我知道我们可以使用useCallback来防止对处
浏览 0提问于2020-04-23得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
