state和props混用
state是页面组件的初始数据(当前组件可以对state中的数据进行任意修改)
props是父组件传递给子组件的数据(子组件只能读取props中的数据,不能直接修改)
子组件中的state要根据父组件传递过来的数据进行同步时,会存在一个数据不同步的问题
父组件:
import React, { Component } from 'react'
import Item from './Item'
export default class Home extends Component {
state = {
num:100
}
componentDidMount(){
console.log('home组件挂载完成')
this.setState({
num:50
})
}
render() {
return (
<div>
<h1>home页面</h1>
<hr/>
<Item pdata={ this.state.num }></Item>
</div>
)
}
}
子组件:
import React, { Component } from 'react'
export default class Item extends Component {
state = {
num:0
}
componentDidMount(){
console.log('item组件挂载完成')
this.setState({
num:this.props.pdata//此时num的数据是父组件没有修改之前的数据,num是100
})
}
render() {
return (
<div>
<h2>item页面</h2>
<p>home组件的数据:{ this.state.num }</p>
</div>
)
}
}
为了解决state和props混用时出现的数据不同步问题,我们要把setState第一个参数写成一个函数,在这个函数中的第一个参数是当前组件的state数据,第二个参数是父组件传递过来的最新数据。
import React, { Component } from 'react'
export default class Item extends Component {
state = { num:0 }
componentDidMount(){
console.log('item组件挂载完成')
this.setState(function(state,props){
state.num = props.pdata;
})
}
render() {
return (
<div>
<h2>item页面</h2>
<p>home组件的数据:{ this.state.num }</p>
</div>
)
}
}
setState的参数
可以是一个对象
可以是一个对象+一个回调函数
可以是一个函数