在全局变量vs componentDidMount中使用属性设置状态
在React中，组件的状态是通过state来管理的。而属性（props）是从父组件传递给子组件的数据。在React组件的生命周期方法中，componentDidMount是在组件挂载后立即调用的方法。
在componentDidMount方法中，我们可以执行一些初始化操作，例如发送网络请求、订阅事件、设置定时器等。如果我们想在componentDidMount方法中使用属性来设置组件的状态，可以通过访问this.props来获取属性的值，并使用this.setState方法来更新组件的状态。
以下是一个示例代码：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
myState: ''
};
}
componentDidMount() {
// 使用属性设置状态
const { myProp } = this.props;
this.setState({ myState: myProp });
}
render() {
return (
<div>
<p>属性值: {this.props.myProp}</p>
<p>状态值: {this.state.myState}</p>
</div>
);
}
}在上述示例中，我们在componentDidMount方法中使用this.props.myProp来获取属性的值，并通过this.setState方法将属性值设置为组件的状态。在render方法中，我们可以通过this.props.myProp和this.state.myState来访问属性和状态的值。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：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
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云网络安全（SSL 证书）：https://cloud.tencent.com/product/ssl
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云云监控（Cloud Monitor）：https://cloud.tencent.com/product/monitor
相关·内容
请帮帮忙，我的代码出了问题，我看到了一些类似的问题，但没有找到为什么会发生这种情况。我收到一个错误。TypeError: this.state.datacharts.map不是函数..请帮助错误在哪里，因为我只是反应这是我的代码： import React, { Component } from 'react';
import ReactSpeedometer from "react-d3-speedometer"
// Resolves charts dependancy
const API = 'http://localhost:9000/Sal
浏览 10提问于2019-04-27得票数 0
我有一个组件：
render: function () {
const item = this.props.item
return (
<div style={{marginTop: '20px', display: 'flex'}}>
{item.get('images').map((url, i) =>
<Thumbnail href='#' src={stripUrl(url)} onClick
浏览 0提问于2016-12-22得票数 0
嗨，我是一个非常新的反应，我真的很难弄清楚很多事情。现在，当用户加载我的主页时，我正在尝试从我的数据库中获取数据。我用这个异步函数来做这件事： let result = await fetch("/api/init", {
method: "GET",
headers: { "Content-Type": "application/json" },
})
.then((response) => response.json())
.then((data) =&g
浏览 17提问于2020-08-11得票数 0
我正在尝试使用componentDidMount将axios中的数据设置为组件状态，但它不起作用
我通过这个简单的代码检查了它
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import "./styles.css";
class App extends Component {
constructor(props){
super(props);
sta
浏览 1提问于2019-11-04得票数 1
GNU中的__attribute__((const))和__attribute__((pure))有什么不同？
__attribute__((const)) int f() {
/* ... */
return 4;
}
vs
__attribute__((pure)) int f() {
/* ... */
return 4;
}
浏览 1提问于2015-03-18得票数 41
回答已采纳
1回答
我有一个带有PanResponder的反应本机组件。我想拖动整个容器并指定所需的样式。但是我可以看到一个事实:样式没有更新；视图没有刷新。
即使我使用componentDidMount()方法并使用setTimeout更改背景色，样式似乎也不会重新呈现视图。
在另一个类中，我使用PanResponder做同样的事情，并拖动以增加高度。它在那里起作用。有什么麻烦？
这是密码。
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions'
浏览 4提问于2015-04-30得票数 0
回答已采纳
一旦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
我试图在React中从子组件内部的父组件调用方法。这是我的父组件的代码：
import Video from 'Video/Video';
class CaseHeader extends React.Component {
constructor(props) {
super(props);
// Bind functions
this.videoComponentDidMount = this.videoComponentDidMount.bind(this);
}
videoComponentDidMount() {
c
浏览 2提问于2017-09-04得票数 0
回答已采纳
这是设置。在前面的问题中，我发现可以通过子组件中的状态传递对象属性，然后使用componentDidUpdate获取该对象属性。在这种情况下，状态和属性都称为到达。
这是基本的代码。
export default class App extends Component {
constructor(){
super();
this.state = {
arrival: {}
}
}
axiosFunc = () => {
axios.get('https://api.warframestat.us/pc').then(res
浏览 1提问于2018-01-31得票数 0
回答已采纳
我在做一个反应申请。我需要进行一个ajax调用，从服务器获取数据，并在组件表的行中填充这些数据。我在ajax中调用componentWillMount并将响应存储在状态中。现在，我的呈现获取这个状态并填充它。不过，我有几个问题：
我是不是应该把ajax放在componentWillMount里
我的componentDidMount没有得到在componentWillMount中设置的state的值。这意味着当componentDidMount试图访问异步时，异步还没有完成。如何解决这个问题？设置async:false确实是一个糟糕的选择。
什么东西都可以在componentWil
浏览 3提问于2017-11-01得票数 1
回答已采纳
我对React和Javascript都是新手，我正在尝试构建一个使用REST API的页面。它工作得很好，除了我想要从API中提取的数据之外，它似乎不起作用。在data变量中是来自我的API端点的副本。const teacherMapped和lessonsMapped工作得很好，但是const teachers几乎相同，但失败了，因为 Line 97:37 'teachers' is not defined no-undef 正如您从注释代码中看到的，我尝试在不同的位置声明该变量，但没有成功。你能给我一些提示，告诉我怎么做对吗？下面是我的代码： import React,
浏览 12提问于2020-06-11得票数 0
回答已采纳
1回答
React-redux数据来得太晚了，我需要组件did挂载方法中的props.user class GroupsPage extends React.Component {
constructor(props){
super(props);
this.state = {
groups: [],
}
}
async fetchGroups (){
fetchGroupsFirebase().then((res) => {this.setState({groups:res})})
};
async componentDid
浏览 9提问于2021-07-27得票数 0
第一前提：
componentDidMount()在组件挂载后立即调用(插入到树中)。
第二前提：
您可以在setState()中立即调用componentDidMount()。它将触发额外的呈现，但它将发生在浏览器更新屏幕之前。这保证了即使在这种情况下，render()将被调用两次，用户也不会看到中间状态。
都来自
My结论：
基于上述，挂载不能是向浏览器显示的最后一步，否则在componentDidMount之前呈现和挂载(任何中间状态)的内容将始终显示。
但是，根据我的经验，我发现构造函数中指定的任何状态实际上都会在componentDidMount中的任何重写状态更改
浏览 0提问于2019-06-26得票数 1
回答已采纳
实际上，我正在componentDidMount中初始化一个变量，然后在控制台上打印它的值。因此，在控制台中，我得到变量的值，但是当我从render中打印变量的值时，我得到的是“未定义的”。
var data //declaring a global variable
export default class Schemes extends React.Component{
constructor(){
super();
this.response = response
componentDidMount(){
/* Some Computation*/
浏览 2提问于2017-11-29得票数 1
回答已采纳
在react中，当我获取时，componentDidMount中元素的offsetTop与在componentDidUpdate()中调用时相同元素的offsetTop值不同。为什么会这样呢？我认为componentDidMount是在render之后调用的，所以DOM元素被放在页面中，所以offsetTop的值应该是正确的。
class Index extends React.Component {
...
render() {
return (
<div className="site-wrapper">
浏览 43提问于2017-11-15得票数 0
当我开发自己的反应博客时，我遇到了一个问题，需要你的帮助，而且我的英语很差，请原谅输入错误。
我编写了用Reacti16.x编写的代码，React发出了一个警告：
警告:只能更新安装或安装组件。这通常意味着在未挂载的组件上调用setState、replaceState或forceUpdate。这是禁止行动。请检查Post组件的代码.
Post组件在getCategories生命周期方法中使用异步请求调用一个ComponentDidMount ()函数，然后在Post组件呈现后单击指向另一个组件的链接，它发出警告。
我试着添加一个标签：
componentDidMount()
浏览 0提问于2018-01-17得票数 0
我无法理解，为什么当我尝试在getTodosList中启动函数getDerivedStateFromProps时，这个方法总是回归到我的TypeError - Cannot read property 'getTodosList' of null中。
另外，在我开始使用getDerivedStateFromProps之后-我的函数也不会在componentDidMount中启动.
我做错什么了？
import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-
浏览 1提问于2018-04-27得票数 3
回答已采纳
我知道在状态中初始化props是错误的，但有没有其他方法可以做到这一点？ 除了如何使用它之外，使用useEffect()钩子是唯一的方法吗？ componentDidMount (){
...
if(this.props.house.rent){
this.setState({rent:this.props.house.rent});
}
}
浏览 8提问于2019-06-18得票数 1
我在componentDidMount()中调用了以下库，它成功地返回了一个对象。
componentDidMount() {
var objData =call.MyLibStart('12121', this);
}
现在，我需要在objData部分使用render()。我还需要访问objData的一些属性，例如，objData.
render() {
//I need the object.postate here
}
我如何访问那里的对象？在这里用A是个好主意吗？
浏览 7提问于2017-11-07得票数 0
回答已采纳
我正在构建一个应用程序，从我的Nodejs应用程序中我可以收到“投诉”。然后，我将这些抱怨作为道具传递给子组件。在子组件中，我将这些属性设置为ComponentDidMount()中的状态。但是render()函数首先被调用，所以它不会在屏幕上显示任何内容。状态不是立即设置的。请帮帮忙。从两天开始我一直在挣扎。 这是父组件 class Complainer extends Component {
state = {
complaints: []
};
async componentDidMount() {
try {
const user = aut
浏览 12提问于2019-04-11得票数 1
回答已采纳
一个故事：
我有一个服务器呈现，但我的应用程序的某些部分不能在那里完成，因为他们使用文档(在画布上绘图的反应艺术库)。我不能以相同的方式呈现所有的东西，因为react会说从服务器和客户端接收到的代码不一样。
因此，我的解决方案是在服务器上呈现我的应用程序的某些部分，然后在客户机上呈现这个部分，在下一个框架中，呈现在客户端上不可能呈现的所有内容。
因此，我考虑在setState中使用componentDidMount并触发DOM更新，这样它就可以包含无法在服务器上呈现的呈现客户端部分，但是eslint说在componentDidMount中设置状态是不好的。从逻辑上讲，我不能说为什么在这种情况下
浏览 12提问于2016-08-16得票数 2
一个简单的react组件(从componentDidMount上的数据存储区调用承诺)抛出了一个警告：
警告:setState(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用setState()。这是禁止行动。请检查LocationNameView组件的代码。
我抛出了一些调试console.log，以查看this.isMounted()是否为真/假，在componentDidMount this.isMounted()中，第一次返回false，然后再一次返回false，它将为true。我不确定文档是否是清晰的，或者componentDidMount的名称是否扭曲了我在
浏览 0提问于2015-12-31得票数 3
回答已采纳
我有一个具有两个函数的组件，它们应该更新state对象：
class Categories extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
categoryData: [],
objects: [],
object:[],
};
}
componentDidMount() {
this.setState({
data:data.Dluga,
category
浏览 0提问于2018-01-16得票数 0
回答已采纳
下面是我的示例代码
var Test = React.createClass({
componentDidMount: function(){
//do something
}
render: function() {
return (
<div id="testDiv">
<Header
messages={this.props.mesage} />
{this.props.children}
<Foote
浏览 4提问于2017-02-08得票数 1
回答已采纳
在类组件中，我们使用componentDidMount，componentDidUpdate生命周期方法来更新状态。(前)
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
它在每个呈现(ComponentDidUpdate)之后运行，包括第一个呈现(ComponentDidMount)。在useEf
浏览 1提问于2019-08-05得票数 5
回答已采纳
我正在跟踪，试图让tensorflow js在react本机中工作。
本教程的代码如下(通过克隆回购程序进行测试)：
class App extends React.Component {
state = {
isTfReady: false,
isModelReady: false,
predictions: null,
image: null
}
async componentDidMount() {
await tf.ready()
this.setState({
isTfReady: true
})
浏览 0提问于2020-05-26得票数 1
回答已采纳
2回答
我对状态的理解可能有些不对&反应中的道具。这是使用React，基于Redux的应用程序。
场景：
我有一个全局SVG组件，它从componentDidMount方法中的应用程序中获取视图端口的维数。
SVG在state中的默认支持(在应用程序初始化时)是：
dimension : {
width : 0,
height : 0
}
componentDidMount从DOM中检索width & height值，并将值分派到状态。
现在我有了一个SVG组件的子组件，它需要更新的svg宽度和高度值来计算默认视图框并再次更新状态。这只需要在挂载时执行一次(要点)，因此viewbo
浏览 2提问于2017-03-02得票数 1
回答已采纳
我有两个组件来演示我的问题：
父级：
import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row } from "react-flexbox-grid";
import Hello from "./Hello";
class App extends React.Component {
state = {
name: "Michal"
};
componentDidMount = () =>
浏览 0提问于2020-07-23得票数 0
3回答
我有一个奇怪的情况，我有一个数组作为状态：this.state = { ActivityItem: []}，并且我从调用如下API的库中将值推送到它：
getDataFromKit(dateFrom) {
Kit.getSamples(stepCountSample, (err, results) => { //api call
if (err) {
return;
}
const newData = resul
浏览 1提问于2020-05-02得票数 0
2回答
如何使组件强制更新其同级组件。目前，我的组件在componentDidMount上呈现，但这发生在下拉列表中的选择上。谢谢
浏览 2提问于2018-08-10得票数 0
需要了解这两种功能在ReactJ中的区别。ComponentWillMount(){} VS ComponentDidMount(){}
浏览 3提问于2018-10-15得票数 4
回答已采纳
2回答
我正在使用ES6类构建一个带有React的web应用程序。我有一个IndexPage.js文件和一个AdminLandingPage.js文件，前者将数据添加到数据库中，后者在其componentDidMount()函数中读回数据库中当前的所有数据。
基本上，两者现在都是独立工作的。我希望能够在IndexPage中以状态(数组)保存数据，然后将该状态传递给另一个文件，在那里我可以检查数组中是否有数据，并设置表的状态(从而使我不必刷新页面)。
IndexPage在其构造函数中包含以下内容：
constructor(props) {
super(props);
this.stat
浏览 16提问于2016-07-27得票数 4
我目前正在使用函数预定义所有的axios调用，例如：
export const getClients = () => {
axios.get("/client/")
.then(response=>{
return response;
})
.catch(error=>{
return error;
});
};
现在，我想在componentDidMount中基于类的组件中调用它，如下所示：
componentDidMount(
浏览 3提问于2021-02-16得票数 1
回答已采纳
3回答
我在A类中访问ComponentDidMount中的JSON文件，我需要在类外部访问结果，并需要在B类中使用它
let test;
console.log(test);
class CustomerPage extends React.Component {
componentDidMount(): void {
$.getJSON("/api/LocaleStrings")
.done(results => {
let JsonString = JSON.parse(results);
test = new Loc
浏览 2提问于2019-01-07得票数 0
当我可以在点击上获得完全相同的功能时，为什么将side draw设置为false的功能被忽略？我甚至可以获取console.log的componentDidMount这是怎么回事？我已经尝试了不同的方法来让它工作，componentWillunmount等等，但除了onclick之外似乎没有其他方法可以使用它，你有什么想法吗？
export class App extends Component {
state = {
sideDrawerOpen: false
};
drawerToggleClickHandler = () => {
this.setS
浏览 0提问于2020-03-19得票数 1
我是reactjs框架的新手，如果在API调用后监听状态改变的正确方式是什么，我会有一点困惑。
通过componentDidUpdate调用action后使用then和catch
componentDidMount(){
this.props.getHero(this.props.params.id).then((result) => {
this.props.initialize({
"name":result.name,
"description":
浏览 3提问于2017-02-16得票数 0
class A extends Component {
constructor(props) {
super(props);
this.state = {
fruitsDetailsList: [],
fruitCode: this.props.fruitCode,
};
}
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
浏览 0提问于2019-09-22得票数 1
回答已采纳
1回答
这个问题与VS2012和Blend 5有关。
控制可视化状态管理器在Blend中是否可用的规则是什么？在用C#/XAML开发Windows应用商店应用时，我总是能够访问blend中的可视化状态管理器。我正尝试在Javascript/HTML5中做同样的事情，但可视化状态管理器不在那里。
实际上，我可以并排在Blend中打开C#和Javascript应用程序，并且可以看到states选项卡在JS中不可用。
浏览 20提问于2013-02-15得票数 1
回答已采纳
我正在使用一个代码(由其他开发人员编写)，它在setState中使用componentDidMount，我知道这是错误的。
此代码为Create和Edit使用一个组件。在componentDidMount中，它检查道具中是否有ID。如果有，这意味着它应该是Edited。如果没有ID，这意味着新记录应该是Created。
通过拥有一个ID，它将调用一个API来获取记录。得到结果后，它使用setState来设置state中的每个值。
此代码会导致布局混乱，因为它将触发第二个render()。
我想知道有一个有值的表单(从数据库中)的最佳方式是什么，然后编辑它们。而不用在setState中使用com
浏览 10提问于2017-09-25得票数 0
回答已采纳
2回答
如何获得导入组件的getBoundingClientRect()？或者至少访问内部的元素
如果它在组件内部使用，我就可以得到它。
FixedTopNavigation.js
constructor(props) {
super(props);
this.state = {
height: 0,
}
}
componentDidMount() {
console.log(this.topNav.getBoundingClientRect());
}
render() {
return (
<nav ref={(ele
浏览 2提问于2019-03-08得票数 0
回答已采纳
每当我尝试使用来自不同组件的全局变量时，我都会得到“未处理的拒绝(SyntaxError)：在JSON位置0处的意外令牌”错误，在本例中，当我在Random.js中使用来自Brewery.js的全局变量时
Brewery.js
componentDidMount() {
window.url = "https://api.openbrewerydb.org/breweries";
fetch(window.url)
.then(response => response.json())
.then((data) => {
浏览 0提问于2019-02-03得票数 0
2回答
通常，它是有效的，但现在它显示了一个错误。
componentDidMount代码
componentDidMount() {
axios.get(`${process.env.REACT_APP_DEV_URL}/admins/playlist_admin`, {
headers: {
'Authorization': this.state.token
}
})
.then((res) => {
浏览 0提问于2021-10-14得票数 0
我想在React中使用分页插件。jQuery中的原始用法：
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, 8],
pageSize: 3,
callback: function (data, pagination) {
// template method of yourself
var html = template(data);
$("#dataContainer").html(html);
}
});
我想用
浏览 2提问于2016-10-03得票数 0
回答已采纳
我刚看了一下关于setState() I componentDidMount()的事。
您可以看到，在render()函数之后，componentDidMount()函数将被React调用。当您将setState()调用放入componentDidMount()中时，将导致重新呈现整个组件树--不仅是当前组件--不要忘记，当前组件刚刚完成呈现。
还有一些人建议把setState()的电话放在componentWillMount()里面。在某些情况下，我希望获得呈现元素的高度，并将其存储为状态，而上述方法无法工作。我还查看了React官方网站，它建议在componentDidMount(
浏览 5提问于2018-09-04得票数 20
回答已采纳
我是新的反应世界，我被困在生命周期的方法，而做编辑操作。
即使更改了道具，也不会触发componentWillReceiveProps方法。
这是我的代码示例。
this.intialState = {
name:'',
code:'',
};
this.state = this.intialState;
componentWillReceiveProps(nextprops){
this
浏览 1提问于2018-03-08得票数 0
因此，我有一个组件，它执行通过Promise返回的API调用：
getStuff(url).then(val => this.setState(prevState => {prevState.alltime = val}));
这是在componentDidMount中调用的，并且正在成功解析为数组状态。
我还有一个组件，我要将这个数组映射到其中，
const relevantData = this.state[this.state.sortType];
let items= <p> no data</p>;
if (relevantData){
it
浏览 0提问于2018-01-05得票数 0
回答已采纳
我有一个receive应用程序，我能够在组件中接收道具。
这是我的componentDidMount()函数
componentDidMount() {
this.graphdata = {
dnsCountPlot: {
data: [{
type: 'scatter',
x: this.props.dnsCountPlot.x,
y: this.props.dnsCountPlo
浏览 4提问于2017-09-22得票数 0
回答已采纳
如果我试图对componentDidMount中React组件中的元素执行document.querySelector，似乎不能保证它(componentDidMount)在DOM上被调用之后被调用。结果是它找不到元素
如果我想访问DOM，有没有我应该使用的事件？在它连接到DOM之后？
作为一个变通办法，我使用了setTimeout，有没有更好的方法？
浏览 2提问于2017-10-24得票数 0
我有一个父组件和两个子组件。一次成功，一次失败，我需要在页面加载时基于异步调用显示这些组件。所以我在页面componentDidMount上进行了异步调用。但这会导致双重渲染。 constructor(props) {
super(props)
this.state = {
showSuccessPage: false
}
}
componentDidMount() {
ActiveAccount.fetchActiveAccount(this.handleSuccess, this.handleFailure)
}
handleSuccess() {
thi
浏览 13提问于2019-04-17得票数 0
为了实现componentDidMount()的效果，我编写了以下代码段：
class Blink extends Component {
constructor(props) {
super(props);
this.state = {output: 'c'};
}
componentWillMount() {
this.state.output += 'w';
}
render() {
this.state.output += 'r';
let display = this.sta
浏览 0提问于2018-02-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
