React JSX组件参数始终未定义，列表无法渲染问题求助

你出错的核心原因是组件props传递方式错误：你把isPacked、name这些props写在了<Item>标签内部（作为子元素），但React组件的props需要直接写在组件标签上作为属性传递，否则子组件无法读取到这些参数，导致name和isPacked值为undefined，列表自然无法正常渲染。

修正后的代码 #

PackingList组件部分

function Item({name, isPacked}){
  return <li className="item">{name}</li>; 
}

export default function PackingList(){
  return(
      <section>
          <h1>Sally Ride's Packing List</h1>
          <ul>
              <Item isPacked={true} name="Space suit" />
              <Item isPacked={false} name="Helmet with a golden leaf" />
              <Item isPacked={false} name="Photo of Tam" />
          </ul>
      </section>
  );
}

index代码（此部分无需修改）

<div>
   <PackingList></PackingList>
</div>  

本质就是把原本写在<Item></Item>中间的isPacked={...}和name="..."移到<Item>起始标签上，改为单闭合标签形式传递属性，这样Item组件就能正确接收props并渲染内容。

内容的提问来源于stack exchange，提问作者GH DevOps