首頁猿問為什么...

為什么 this.setState() 在構造函數中不起作用？

JavaScript

富國滬深 2023-07-20 14:40:22

我正在使用react.js，并this.setState()在構造函數中添加了它，但它不起作用。這是我的代碼 -class App extends React.Component { constructor(props) { super(props); this.state = { age: '18' } this.setState({id: 'name'}); } render(){ return ( <div> <p>{this.state.id}</p> <p>{this.state.value}</p> </div> ) }}這會渲染第二個p標簽，但不會渲染第一個標簽，為什么會這樣？

查看完整描述

3 回答

智慧大石

TA貢獻1946條經驗獲得超3個贊

setState 函數除了設置狀態外，還具有更改時重新渲染的機制。

構造函數在組件實際安裝之前執行，并且不會渲染任何內容。這就是為什么在構造函數中使用 setState 沒有意義。

所以你需要像這樣實現這一點：

constructor(props) {

super(props);

this.state = {

age: '18',

id: 'name'

}

反對回復 2023-07-20

喵喵時光機

TA貢獻1846條經驗獲得超7個贊

不要使用setState()內部構造函數或內部渲染方法

構造函數- 在創建實例時調用一次，如果您在構造函數內部創建，則不會發生重新渲染。

render - 如果您setState()在 render 方法內部使用，它將變為無限，因為當您使用時會發生重新渲染setState()

如果你想保存這樣的屬性來聲明在生命周期方法中執行它componentDidMount()

改進

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

age: '18'

}

componentDidMount(){

this.setState({id: 'name'});

}

render(){

return (

<div>

<p>{this.state.id}</p>

<p>{this.state.value}</p>

</div>

)

}

或者像年齡一樣直接輸入

this.state = {

age: '18',

id: 'name'

}

反對回復 2023-07-20

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

age: '18',

id: '',

}

componentDidMount(){

this.setState({id: 'name'});

}

render(){

return (

<div>

<p>{this.state.id}</p>

<p>{this.state.age}</p>

</div>

)

}

反對回復 2023-07-20

3 回答
0 關注
218 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么 this.setState() 在構造函數中不起作用？

為什么 this.setState() 在構造函數中不起作用？

3 回答

添加回答

為什么 this.setState() 在構造函數中不起作用？

為什么 this.setState() 在構造函數中不起作用？