React中数组列表无法正常渲染，操作确认无误，请问问题出在哪里？

• 核心错误：map遍历取值错误
  你在遍历items数组时，循环回调的参数是当前遍历到的单个元素item，但代码里写的是{items.text}，items是整个数组对象，本身没有text属性，取值为undefined，所以没有内容渲染。
• 附加规范问题：列表无唯一key、元素id重复
  React要求列表项必须设置唯一的key属性用于虚拟DOM diff，你当前所有数组元素的id都为1，完全重复，后续更新列表时会出现异常。

修复后完整代码 #

import { useState } from 'react';

function App() {
  const [items , setItems] = useState([
    {
       id:1,
       text:'simple 1'
    },
    {
      id:2,
      text:'simple 2'
    },
    {
      id:3,
      text:'simple 3'
    }
  ])

  return (
    <div className="App">
    {items.map((item) => (
      <h1 key={item.id}>{item.text}</h1>
    ))}
     <h1>Hello from React js</h1>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Hashim Aliyu Hashim