6. 使用map()方法循环展示数组数据 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

import React, { Component, Fragment } from "react";

class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: 'hello',
            list: ['学英语', '学React']
        }
    }
  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue}/>
          <button>提交</button>
        </div>
        <ul>
            {/*使用 map()方法循环展示数组数据*/}
            {
              // 在react中给数组循环时，需要给每一项加key值
              this.state.list.map((item, index) => {
                return (
                  <li key={index}> {item} </li>
                )
              })  
            }
        </ul>
      </Fragment>
    );
  }

}

export default TodoList;