state和props混用

电玩女神 2022-12-05 10:20 150阅读 0赞

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

可以是一个对象

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

可以是一个函数