个人理解：react的状态state 初始化、遍历-蒲公英云

个人理解：react的状态state 初始化、遍历

た入场券 2022-11-30 01:24 153阅读 0赞

state初始化

一般我们是直接在类组件的constructor中初始化的，如下：

import React, {  Component } from 'react'
export default class tryBro1 extends Component { 
    constructor(props){ 
        super(props)
        this.state={ 
            com:"I'm tryBro."
        }
    }
    render() { 
        return ()
    }
}

但其实也不一定非按上面的形式写，直接在类里面定义一个state的对象，也是可以作为react的状态存在，也可以通过setState方法修改state里的值，如下：

import React, {  Component } from 'react'
export default class tryBro1 extends Component { 
    state={ 
        com:"I'm tryBro1."
    }
    update=()=>{ 
        this.setState({ 
            com:"I'm tryBro1 and I'm here again."
        })
    }
    render() { 
        console.log("tryBro1中的state：",this.state)
        return (
            <div>
                <p>{ this.state.com}</p>
                <button onClick={ this.update}>点击修改state</button>
            </div>
        )
    }
}

在这里插入图片描述

但请务必牢记，并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中。

state遍历

首先我们得知道，react中的state是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合，通过setState()方法来修改数据。

this.state不能直接在页面上展示，

<p>react的状态state：{this.state}</p>   //这种写法是错的

会报以下错误：
在这里插入图片描述
意思是，” 错误:对象不是有效的反应子(发现:对象与键{textname, textage})。如果您打算呈现一组子元素，请使用数组。 “ 这是在提醒你要遍历着展示里面的内容。

但可以在js代码里面查看，

<p>react的状态state：{console.log(this.state)}</p> //这种是可以的

那么怎么列表循环让this.state在页面上显示呢，可以先把this.state转换成数组，然后遍历出来：

<p>react的状态state：{ 
    Object.keys(this.state).map((item, index) => { 
        return (
            <p>{ item}---{ this.state[item]}</p>
        )
    })
}</p>