state和props混用

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的参数

可以是一个对象

可以是一个对象+一个回调函数

可以是一个函数