JSX元素必须包含父元素报错求助：多次检查未定位问题

Hey Bobby，我一眼就揪出问题啦！你在Jobs.map()的回调函数里返回了两个同级的JSX元素（<div className="card-image"></div>和<div className="card-text">...</div>），但JSX的核心规则就是：每个代码块只能有一个根元素，这就是你反复检查都没发现的报错根源。

问题代码定位： #

Jobs.map((item) => (
  <div className="card-image"></div>
  <div className="card-text">
    <span className="date">{item.date}</span>
    <h2>{item.Job}</h2>
    <ul>
      <li>{item.description}</li>
    </ul>
  </div>
))

这里箭头函数直接返回了两个并列的div，JSX不允许这种"无父元素包裹"的情况，必须给它们套一个容器。

两种实用解决方案： #

方案1：用普通div包裹（最直观）

给两个元素加一个父div，同时别忘了给循环渲染的元素加唯一key属性（React强制要求，避免渲染警告）：

Jobs.map((item) => (
  <div key={item.id} className="card-item">
    <div className="card-image"></div>
    <div className="card-text">
      <span className="date">{item.date}</span>
      <h2>{item.Job}</h2>
      <ul>
        <li>{item.description}</li>
      </ul>
    </div>
  </div>
))

方案2：用React.Fragment（无额外DOM节点）

如果你不想多生成一个无用的div，可以用React.Fragment或者简写的<></>，它不会在DOM中渲染额外节点：

// 完整写法（需要加key时用这个）
Jobs.map((item) => (
  <React.Fragment key={item.id}>
    <div className="card-image"></div>
    <div className="card-text">
      <span className="date">{item.date}</span>
      <h2>{item.Job}</h2>
      <ul>
        <li>{item.description}</li>
      </ul>
    </div>
  </React.Fragment>
))

// 简写版本（无法加key，适合不需要key的场景）
Jobs.map((item) => (
  <>
    <div className="card-image"></div>
    <div className="card-text">
      <span className="date">{item.date}</span>
      <h2>{item.Job}</h2>
      <ul>
        <li>{item.description}</li>
      </ul>
    </div>
  </>
))

把上面的修改替换到你的代码里，这个报错立刻就会消失啦！

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