react map数据读取

最新推荐文章于 2025-10-27 19:21:17 发布

原创最新推荐文章于 2025-10-27 19:21:17 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用构造函数初始化状态，并通过map循环渲染状态数组中数据的React组件示例。示例中状态数组包含带有端口编号与传感器名称的对象。

设置数据

    constructor(props) {
         super(props);
         this.state = {
              decoratedata:[
                  {port:1,sensor:"超级传感器"},
                  {port:2,sensor:"超级传感器"},
                  {port:3,sensor:"超级传感器"},
              ]
         }
         
       
    }

开始渲染数据

  render() {
 
        return (
            
                  {
                       this.state.decoratedata.map((item,i) => (
                        <div className={styles.popli} key={i}>{item.port}:{item.sensor}</div>
                       ))
                  }

            );
    }