React本机如何在componentWillMount方法上执行setState
在React中，componentWillMount方法是在组件渲染之前调用的生命周期方法。在这个方法中，可以执行一些初始化的操作，例如设置组件的初始状态。
在React 16.3版本之后，componentWillMount方法被废弃，不推荐使用。官方推荐使用componentDidMount方法来替代componentWillMount方法。因此，建议在componentDidMount方法中执行setState操作。
setState方法用于更新组件的状态。通过调用setState方法，可以告诉React重新渲染组件，并根据新的状态更新组件的显示。在componentDidMount方法中执行setState操作可以确保在组件渲染完成之后再更新状态，避免出现不一致的情况。
以下是一个示例代码：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
// 在componentDidMount方法中执行setState操作
this.setState({ data: 'Hello, World!' });
}
render() {
return (
<div>{this.state.data}</div>
);
}
}在上述示例中，组件的初始状态为null。在componentDidMount方法中，通过调用setState方法更新状态为'Hello, World!'。当组件渲染完成后，会显示'Hello, World!'。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我想在导航var上显示右按钮，但是没有呈现。请给我解决办法或一些建议。
错误
ExceptionsManager.js:73警告:不能在现有状态转换期间更新(例如在render或其他组件的构造函数中)。呈现方法应该是道具和状态的纯函数；构造器副作用是一种反模式，但可以移动到componentWillMount。
环境
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-router-flux"
浏览 3提问于2017-08-15得票数 0
我正在处理购物清单，并希望将选中的项目保存在本地存储中。然而，设置AsyncStorage对我来说并不起作用，我说未定义不是一个对象
下面是我的代码：
import React from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, Content, List, ListItem, Text, CheckBox, AsyncStorage } from 'native-base';
export default class
浏览 6提问于2016-11-02得票数 1
在react组件中，最好在构造函数()或componentWillMount()中设置初始状态？
export default class MyComponent extends React.Component{
constructor(props){
super(props);
this.setState({key: value});
}
}
或
export default class MyComponent extends React.Component{
componentWillMount(props){
this.setState({key: v
浏览 0提问于2016-06-13得票数 51
回答已采纳
我试图理解react生命周期方法，并遇到了一个问题:在以下哪种方法中，我们不应该调用setState()功能来更新组件：
componentWillMount()
componentDidMount()
shouldComponentUpdate()
componentDidUpdate()
浏览 0提问于2018-12-06得票数 0
我得到了这个错误，因为在我的account.js文件中重新初始化了firebase。我想使用firebase.auth，所以我的account.js文件将在登录时显示登录表单，并在登录时显示一个“注销”按钮。有正确的方法吗？
Account.js
import React from 'react';
import firebase from 'firebase';
import { View, Image, TouchableOpacity, Text, TextInput } from 'react-native';
import { S
浏览 1提问于2019-03-12得票数 0
因此，假设我有2个React组件，如下所示：
var Parent = React.createClass({
getInitialState: function(){
return ({
child: <Children state="someState" />
});
},
parentFunction: function() {
this.setState({
child: <Children state="otherState" /&
浏览 1提问于2016-03-27得票数 1
回答已采纳
**编辑/RE-措辞**
在回答了我的问题后，我对问题中的代码进行了编辑，以说明我无法尽可能清楚地理解什么。
我有一个withErrorHandler，它将被用作许多单独组件的临时组件。
其中一个组件是MyComponent。
componentWillMount of withErrorHandler中的代码按预期工作，但由于它是一个简化的方法，所以我必须将它移到某个地方。
位置- ComponentDidMount拦截器将无法拦截错误。
Location - Constructor拦截器将拦截错误，但是withError处理程序中的模式不会显示给用户。
这里到底发生了什么？
import
浏览 6提问于2020-08-15得票数 3
我使用的是React.js，如您所知，componentWillMount()将被废弃。我想换掉我的componentWillMount。
我将把它的逻辑移到constructor中。在componentWillMount和constructor中执行某些逻辑有什么区别吗？
例如,
在此之前
class Hello extends React.Component {
componentWillMount() {
doSomething();
}
render() {
return <div>{this.state.name} </di
浏览 1提问于2018-08-30得票数 23
回答已采纳
2回答
所以我有这个例子来展示我现在正在处理的一些代码遇到的问题(由于各种原因，我无法发布确切的代码)。
var Test1 = React.createClass({
getInitialState: function() {
return {
events: ['Demo loaded'],
buttonClicked: false
};
},
componentWillMount: function() {
document.addEventListener('click', this.onDocum
浏览 0提问于2015-07-11得票数 3
我在ReactJS中创建了一个运行良好的本地存储。
但我想用这段代码来反应-本土化。
我搞不懂怎么才能申请
这个代码是ReactJ的。
...
componentWillMount(){
const contactData = localStorage.contactData;
if(contactData){
this.setState({
contactData:JSON.parse(contactData)
})
}
}
...
...
componentWillMount(){
const contac
浏览 0提问于2018-12-31得票数 1
回答已采纳
如何在选择或单击列表中的单个项目时更新FlatList中所有项的UI设计。我已经尝试了可能的结果，我还可以想到，只有在数据发生更改时，平面列表属性才能工作，否则就不能工作，还可以将值从子组件传递给父组件，并更改平面列表中的一个属性以重新呈现。
这是我在从子组件回调时更改数据数组的代码：
export default class CombinedScreenList extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
dat
浏览 2提问于2019-05-02得票数 1
回答已采纳
在我用盖茨比创建的网站上，我想在第一次呈现DOM window.innerWidth之前检查它的大小。我想用一个有条件的检查innerWidth来决定网站应该如何呈现:作为桌面或移动版本。一个简单的修复方法是在创建react组件之前检查窗口的宽度，并在代码中进一步使用true/false值。它在开发版本中有效，但是..。情况是，在生产版本中，当我进行gatsby构建时，控制台中出现了一个错误：
failed Building static HTML for pages - 2.872s
ERROR #95312
"window" is not available dur
浏览 4提问于2020-07-30得票数 0
回答已采纳
如果我在setState中调用componentWillMount，那么render方法中的状态保证存在吗？注意，我不是在回调中调用setState。
Facebook声明："componentWillMount在呈现()之前被调用，因此在这个方法中同步调用setState()不会触发额外的呈现。“
引用“不触发额外的呈现”对我来说意味着this.state将是在componentWillMount中设置的，但我不完全清楚是否是这样。有人能多放点光吗？(因为setState是异步操作，所以我不确定是引入了争用条件，还是在setState之后在componentWillMount中保证了
浏览 2提问于2017-11-01得票数 3
回答已采纳
4回答
我在我的应用程序中使用了React导航，应用程序由带有多个屏幕的StackNavigator组成，其中一些屏幕上有带有autoFocus={true}的TextInput
问题:在这些屏幕上，当组件呈现时，屏幕的高度在构造函数中设置：
constructor(props) {
super(props);
this.state = {
height: Dimensions.get('window').height,
};
}
但是，由于autoFocus of TextInput是true，该屏幕上的键盘在呈现之后几乎立即在屏幕上弹出，导
浏览 7提问于2017-10-05得票数 67
回答已采纳
1回答
当我使用react进行SSR时，将如何构建发送给客户端的内容？
它是否等待异步操作完成？
它是否等待树中所有组件的状态以某种方式稳定？
它会在某些生命周期方法中等待异步代码，比如用componentWillMount() ...修饰的await/async代码吗？
如果我将一些异步代码包装成承诺并调用setState，那么它就是回调--这个更改会被考虑进去吗？
浏览 1提问于2018-02-06得票数 0
据我所见，componentWillMount能做的和constructor不能做的唯一事情就是调用setState。
componentWillMount() {
setState({ isLoaded: false });
}
因为我们还没有调用render，所以componentWillMount中的setState将在输入第一个render()传递之前准备状态对象。这与constructor所做的事情本质上是一样的：
constructor(props) {
super(props);
this.state = { isLoaded: false };
}
但
浏览 0提问于2016-11-27得票数 41
回答已采纳
import React, { Component } from 'react'
import { connect } from 'react-redux';
export default function(strategies = []) {
class Authentication extends Component {
constructor() {
super()
this.state = {
allGreen: true
}
浏览 14提问于2017-02-20得票数 0
我有一个获取数据的应用程序接口，我想循环遍历数据并将其呈现在一个列表上，但是componentWillMount中的setState是未定义的。我得到了这个错误
[Unhandled promise rejection: TypeError: this.setState is not a function. (In 'this.setState({]
class FoodsScreen extends Component {
constructor(props) {
super(props);
this.componentWillMount = this.c
浏览 13提问于2019-11-12得票数 0
回答已采纳
我尝试为我的应用程序创建一个网络可用性组件。我在network.js中的生命周期组件 import { Component } from 'react';
import { NetInfo } from 'react-native';
export default class Network extends Component {
constructor(props) {
super(props);
this.state = { connected: null }
}
componentWillMount() {
浏览 16提问于2019-02-06得票数 1
1回答
我在react中使用下面的方法从getUser调用userService，并为在getUser函数中传递的相应的用户id获取数据。但这是以异步方式完成的，这意味着我们的呈现方法在完成对getUser和“用户”状态的调用之前完成了执行。我希望以同步的方式完成这一工作，以便在数据返回和状态设置之后执行render方法。我该怎么做。
componentWillMount() {
var id = this.props.match.params.id;
UserService.getUser(id)
.then(res => {this.setState({
浏览 1提问于2019-12-06得票数 0
回答已采纳
2回答
我对本地人的反应有点陌生。
我试图为每个组件添加一个值，本质上是登录信息。
我正在使用这个图书馆：
您可以这样获得登录信息：
import Login from 'react-native-login-keycloak';
const gatheredTokens = await Login.getTokens();
显然，等待必须在异步函数中，因此我尝试如下：
async componentWillMount() {
const gatheredTokens = await Login.getTokens();
this.setState({ gathe
浏览 0提问于2019-09-10得票数 2
回答已采纳
每当我聚焦一个页面时，我都想调用componentWillMount。我使用了react-redux和react导航。 使用react导航时，我使用import { withNavigationFocus } from 'react-navigation';来检测页面是否处于活动状态，但是当我调用componentDidMount时，几秒钟后我看到的是旧视图。当页面被聚焦时，我想调用componentWillMount而不是componentDidMount。 这是我的代码： class HomeScreen extends React.Component {
co
浏览 23提问于2020-01-15得票数 0
回答已采纳
1回答
数据库在本机防火墙中不起作用。
、、、、
这个问题不是重复的，因为firebase.database不是函数。我安装了防火墙并按以下方式导入
import React, { Component } from 'react'
import { View } from 'react-native'
import Card from '../components/card'
import firebase from 'firebase/compat/app'
import database from 'firebase/compat/database'
exp
浏览 4提问于2021-11-18得票数 0
回答已采纳
1回答
我正在使用jest对react原生应用程序进行单元测试。我在我的一个组件中使用了AsyncStorage。
componentWillMount() {
this.setState({ avatarSource: null });
AsyncStorage.getItem('UserDetails', (err, result) => {
var objData = JSON.parse(result);
this.setState({ userdetail: objData });
axios.get(SERVER_U
浏览 0提问于2018-06-06得票数 1
对于我从另一个开发人员那里继承的React应用程序，其中一个页面包括：
import { getLogUser } from "../../appRedux/actions/authAction";
constructor(props) {
super(props);
this.state = {
user: null,
};
}
UNSAFE_componentWillMount() {
let user = getLogUser();
this.setState({ user });
// user sta
浏览 8提问于2022-03-30得票数 1
回答已采纳
我的JSON如下所示
{
"towns" :[
{
"id" : 0,
"location": "Japanifornia",
"status" : 1
},
{
"id" : 1,
"location" : "Kohonohakatsuki",
"status&
浏览 4提问于2018-03-30得票数 0
这是相机的代码。我想要一个按钮来打开相机。我不希望它在应用程序启动时自动打开。另外，有没有办法检测图像中的文本并将其保存？
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';
export default class CameraExample extends React.Component {
state = {
hasC
浏览 0提问于2018-06-08得票数 1
我在测试使用本地存储保存JWT令牌并根据身份验证检索api调用和路由的react组件时遇到了问题。
组件本身工作正常，但是当我测试时，我在这三个测试中都得到了这个错误
TypeError: localStorage.getItem不是一个函数
这是我写的代码
home.test.js
import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon&#
浏览 13提问于2017-04-25得票数 6
回答已采纳
下面有一个函数，它设置一个InitialState，然后使用componentWillMount和fetchData进行api调用来分配数据this.state。但是，当this.setState()完成时，呈现函数不会用新的this.state数据触发，我的函数如下：
var Home = React.createClass({
getInitialState: function() {
return {
city: '',
weather: '',
temperature: 0,
humidity:
浏览 2提问于2016-10-10得票数 2
回答已采纳
3回答
如何使用http.get从一个JSON调用中筛选数据？控制台说：
TypeError:无法读取未定义的属性“toLowerCase”
使用角度很容易做一个管道服务和完成，但使用ReactJS很多事情是复杂的。
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function searchingData(product) {
return function(x){
浏览 0提问于2018-03-02得票数 3
2回答
我是react和任何javascript测试框架的新手。
我有一个简单的组件，它从API中检索一个项，并将它们显示在屏幕上。
函数getItems()是从componentWillMount调用的。
是否可以等到getItems()完成后才进行断言？
ItemDetails.js
class ItemDetails extends Component {
constructor(props) {
super(props);
this.state = {
details: ''
}
}
浏览 0提问于2018-03-30得票数 5
回答已采纳
2回答
我使用的是组件，但是动画对于fontSize来说有点参差不齐。我试着增加Animated.Timing的toValue，但是没有成功。我需要修改哪个部分才能让它更流畅？敬请指教。
import React, { Component } from 'react';
import { View, TextInput, Animated, Easing } from 'react-native';
export class FloatingLabelInput extends Component {
state = {
isFocused: false,
浏览 103提问于2019-10-27得票数 2
回答已采纳
我正在创建react原生应用程序。我有一个数组，并且想在循环之外使用value。我已经在this.state=中声明了值{current_cat_id：‘’，}我已经在componentWillMount中尝试过了，如下所示：
componentWillMount() {
var ids = [];
this.props.data.map((dataImage,Index) => {
dataImage['main-head'].map((subchild,Index2) => {
ids.push(subch
浏览 1提问于2018-01-17得票数 0
回答已采纳
不建议再使用componentWillMount，所以我对这种行为不太熟悉。然而，在我的项目中仍然有一些采用componentWillMount的遗留代码。当我深入研究它时，我发现这个奇怪的行为，redux存储的变化并没有立即反映在第一次渲染中。 我在以下部分简化了代码(有关codeSandBox runnable的完整代码可以在here中找到) 在本例中，我尝试在componentWillMount中设置本地状态和redux存储。根据React生命周期顺序，我应该能够在第一个render()中查看这两个值。 componentWillMount() {
this.setState(pr
浏览 18提问于2021-04-27得票数 1
我有以下代码用于我的React-Select集成，并且需要在第一次呈现之前设置一次selectedOption字段。 import React from 'react';
import Select from 'react-select';
interface IOption{
value:string,
label:string
}
interface Props{
data : IOption[],
onSelected : (id:string) => void
}
export default class
浏览 27提问于2020-08-13得票数 0
回答已采纳
我是新的反应，需要一些帮助。
我试图在一个单独的文件上创建API函数，这样我就可以随时重用它。
我意识到不能在组件之外使用setState，所以我的方法是拥有返回JSON对象的函数。
Api.js
export function getMemberInfo (loginInfo)
{
fetch('http:url/'+loginInfo[0].ID)
.then(res => res.json())
.then(json => {return json});
}
export default {getMemberInfo};
Member
浏览 0提问于2019-03-07得票数 1
回答已采纳
为什么这不起作用：
class Slider extends React.Component {
constructor(props){
super(props);
this.state = {
top : 0,
responsiveImg : ""
};
}
componentWillMount(){
const bodyWidth = window.innerWidth;
const responsiveSliderIm
浏览 2提问于2016-07-21得票数 3
回答已采纳
1回答
我正在尝试添加一个视频播放器，我使用react-native-video-controls在我的视频上添加控件，但是它在重置暂停时有问题
代码：
handleExitFullScreen = () => {
this.setState({
fullScreen : false
});
}
handleEnterFullscreen = () => {
this.setState({
fullScreen : true
});
}
<VideoPlayer
source
浏览 2提问于2019-07-10得票数 0
我的密码怎么了？从API获得JSON时出现了一个错误：
this.setState不是一个函数
代码：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
};
componentWillMount() {
const url = 'myurl';
http.get(url, function(res){
v
浏览 3提问于2016-08-23得票数 2
回答已采纳
我刚看了一下关于setState() I componentDidMount()的事。
您可以看到，在render()函数之后，componentDidMount()函数将被React调用。当您将setState()调用放入componentDidMount()中时，将导致重新呈现整个组件树--不仅是当前组件--不要忘记，当前组件刚刚完成呈现。
还有一些人建议把setState()的电话放在componentWillMount()里面。在某些情况下，我希望获得呈现元素的高度，并将其存储为状态，而上述方法无法工作。我还查看了React官方网站，它建议在componentDidMount(
浏览 5提问于2018-09-04得票数 20
回答已采纳
1回答
这是一个ReactJS组件，它接受日期并显示这个日期是多久前(5秒前、3分钟前、5小时前)+它使用setTimeout来在state.displayDate更改时自动更新自己。
怎么回事：
关于ComponentWillMount：从道具中设置state.date
用一个state.displayDate更新setTimeout
这是一个很好的模式，还是有什么可供选择的？
var MomentAgo = React.createClass({
propTypes: {
date: React.PropTypes.string.isRequired
},
getInitial
浏览 0提问于2015-04-23得票数 1
回答已采纳
我正在编写一个简单的reactjs组件，它基于套接字和api调用进行更新。当前，当单击侧栏项(NavBarSide)时，将执行handleNavClick方法。这将返回一个基于服务器端处理的查询的代码。这将状态设置为新的滴答器。这将更新标题栏，但不会更新图表。根据我目前对react的理解，这是因为更新时没有调用componentWillMount()方法，因此没有形成新的套接字连接。
我应该将componentWillMount()函数中的代码复制到另一个生命周期事件中吗？还是编写处理代码更新的另一个函数？
import IO from 'socket.io-client';
浏览 0提问于2018-03-20得票数 0
回答已采纳
**在我的代码中，我得到了一个错误，它说'this.state.leader.map‘不是一个函数。
我在网上搜索我的问题，但他们都没有解决我的问题。
下面是我的代码。我希望，代码是清楚易懂的**
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import DOMParser from 'react-native-html-parser';
import axios from 'axios
浏览 1提问于2019-02-11得票数 2
回答已采纳
一个类用于拦截axios错误。要绑定箭头函数，可以使用componentDidMount()。现在我需要初始化来自服务器的数据，所以我必须使用componentWillMount()，除非它将在React 17中被删除，并且警告消息建议我使用构造函数。当我这样做时，它会给我一个错误。
import React, {Component} from "react";
import Modal from "../../components/UI/Modal/Modal";
import Aux from "../Auxiliary/Auxiliary"
浏览 0提问于2020-05-12得票数 3
1回答
据我所知，这是Redux应该解决的问题，但目前我正在尝试在没有它的情况下使其工作。
当我运行这个程序时，我意识到它被固定在一个模式中。当我运行render时，它触发了updateState()，它改变了状态，触发了重呈现，触发了updateState()等等.
我发现了一个错误：
Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods shoul
浏览 5提问于2016-11-16得票数 0
回答已采纳
我有一个来自搜索栏的对象(结果)，我试图通过history.push发送到搜索结果页面，我很难通过重定向到的页面上的道具访问对象。对于我来说，最简单的方法是重定向到下一页，并且能够访问我试图发送到那里的结果。
import React, {Component} from 'react';
import {Search, List, Form} from 'semantic-ui-react';
import {browserHistory,withRouter} from "react-router-dom"
import axios from
浏览 0提问于2018-08-12得票数 0
回答已采纳
，我有ScreenA来单击Next ScreenB，然后返回到屏幕A，不调用函数componentWillMount()
ScreenA -> Next -> ScreenB -> Back() -> ScreenA
如何在Back Action中重放Rout屏幕
类ScreenA
import React from "react";
import { Button, Text, View } from "react-native";
class ScreenA extends Component {
constructor
浏览 0提问于2018-06-19得票数 3
回答已采纳
我试图使用JEST来编写单元测试，这个组件从locaStorage获得componentWillMount函数中的JSON对象，
反应组分
import React from 'react';
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
sampJSON: null,
username: null
}
}
浏览 2提问于2016-08-28得票数 1
我想在我的react代码中使用axios从服务器获取数据。我将axios代码放在我的react组件的componentWillMount中，如下所示。
componentWillMount()
{
axios
.get("https://jsonplaceholder.typicode.com/Posts")
.then(function(response) {
this.setState({Posts : response.data[0].title});
})
浏览 0提问于2019-06-15得票数 1
回答已采纳
当试图在componentWillMount中获取数据以用于服务器端呈现时，我收到了警告：
警告:setState(.)：只能更新安装组件。这通常意味着您在服务器上的setState()外部调用了componentWillMount()。这是不允许操作的
下面是代码片段：
async fetchProductsSSR() {
var response = await fetch(BACKEND_URL + '/products/', {
method: 'GET',
headers: {
'
浏览 3提问于2017-10-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
