React Hooks中使用.map()及扩展运算符传参渲染组件报错求助

报错原因 #

你写的 <Item data={...data} /> 是语法错误。JSX 中，属性值里的 JavaScript 表达式需用单对大括号包裹，但 ...data 是对象展开语法，它会把 data 的所有键值对展开成多个独立项，而 data 这个 props 只能接收单个值，这种写法不符合 JSX 语法规则，所以解析器抛出了「Unexpected token ...」错误。

两种正确写法 #

根据你的需求选择对应方式：

• 需求1：把data的所有属性作为独立props传给Item
  直接在组件标签上使用对象展开：

  <Item {...data} />
  

  之后在Item里可以直接通过props.id、props.title（假设data包含这些属性）获取对应值。

• 需求2：把展开后的对象作为data属性的值传递
  把展开后的对象再用一对大括号包裹，生成新对象赋值给data：

  <Item data={{...data}} />
  

  此时Item需要通过props.data来访问这个对象。

额外优化 #

原代码里的 products && products?.products?.map 存在冗余，可选链?.已经会自动处理products为null/undefined的情况，直接写成 products?.products?.map 即可：

<div className="products">
  {products?.products?.map((data) => (
    <div key={data.id}>
      <Item {...data} /> {/* 或按需求用 data={{...data}} */}
    </div>
  ))}
</div>

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