用react把一个数组对象遍历然后显示在网页上面

Question

react入门的一个问题，定义一个json对象，用react将数组对象弄成几个div排列在网页上面，有没有简单的案例

Answer 1

就是一个列表循环 在 render里写个循环 return 一下 div

class List extends Component {
    constructor(props){
        super(props);
        this.state={
            data:[
                {
                    name:"333",
                    age:"14"
                },
                {
                    name:"44",
                    age:"15"
                }
            ]
        }
    }
    render() {
        const {data}=this.state;
        return (
            <div>
                {
                    data.map((item)=>{
                        return (
                            <div>姓名：{item.name}   年龄：{item.age}</div>
                        )
                    })
                }
            </div>
        );
    }
}

hook 写法

function List() {
    let d = [
        {
            name: "333",
            age: "14"
        },
        {
            name: "44",
            age: "15"
        }
    ];
    const [data, setData] = useState(d);
    return (
        <>
            {
                data.map((item) => {
                    return (
                        <div>姓名：{item.name}   年龄：{item.age}</div>
                    )
                })
            }

        </>
    )

}