嵌套在对象中的数组无法遍历，Preact环境报错求助

报错信息 #

Error: Objects are not valid as a React child (found: object with keys {type, props, key, ref, __k, __, __b, __e, __d, __c, __h, constructor, __v, __source, __self}). If you meant to render a collection of children, use an array instead.

环境信息 #

• Node: v18.13.0
• NPM: 8.19.3
• preact: ^10.15.0
• @preact/compat: ^17.1.2

数据结构 #

export const clientData = {
  clients: [
    {
      name: 'comapany1',
      logo: './src/assets/images/company1.png',
    },
    {
      name: 'company2',
      logo: './images/company2.png',
    },
    {
      name: 'company3',
      logo: './images/company3.png',
    },
    {
      name: 'company4',
      logo: './images/company4.png',
    },
    {
      name: 'company5',
      logo: './images/company5.png',
    },
  ],
};

尝试过的遍历方式 #

方式一 #

clientData?.clients?.map(client => {
  return (
    <div class="mt-12 grid grid-cols-2 sm:grid-cols-5 md:grid-cols-5">
      <div class="p-4 grayscale transition duration-200 hover:grayscale-0">
        <img src={client.logo} class="h-32 w-auto mx-auto" loading="lazy" alt="client logo" width="" height="" />
        <p class='text-center pt-5' >{client.name}</p>
      </div>
    </div>
  )
})

方式二 #

const { clients } = clientData;       

{
  clients.map(client => {
    // ...
  })
}

方式三 #

{
  Array.isArray(clients) &&
    clients.map(client => {
      return (
        <div class="mt-12 grid grid-cols-2 sm:grid-cols-5 md:grid-cols-5">
          <div class="p-4 grayscale transition duration-200 hover:grayscale-0">
            <img src={client.logo} class="h-32 w-auto mx-auto" loading="lazy" alt="client logo" width="" height="" />
            <p class='text-center pt-5' >{client.name}</p>
          </div>
        </div>
      )
    })
}

解决方法 #

1. 添加唯一key属性 #

Preact/React要求遍历生成的元素必须带有唯一key属性，这是渲染列表的硬性要求，缺失可能导致渲染异常或报错。可以用每个client的name作为key（确保name唯一）：

{clientData.clients.map(client => (
  <div key={client.name} class="p-4 grayscale transition duration-200 hover:grayscale-0">
    <img src={client.logo} class="h-32 w-auto mx-auto" loading="lazy" alt={`${client.name} logo`} />
    <p class='text-center pt-5'>{client.name}</p>
  </div>
))}

2. 修正JSX结构 #

你的代码中每个map项都嵌套了grid容器，这会导致每个客户端单独占用一个网格布局，不符合预期。应该将grid容器放在map外部，仅在map中渲染单个客户端的元素：

<div class="mt-12 grid grid-cols-2 sm:grid-cols-5 md:grid-cols-5">
  {clientData.clients.map(client => (
    <div key={client.name} class="p-4 grayscale transition duration-200 hover:grayscale-0">
      <img src={client.logo} class="h-32 w-auto mx-auto" loading="lazy" alt={`${client.name} logo`} />
      <p class='text-center pt-5'>{client.name}</p>
    </div>
  ))}
</div>

3. 检查资源路径 #

项目中src目录下的资源建议通过导入方式引用，避免打包后路径错误：

// 先导入资源
import Company1Logo from './src/assets/images/company1.png';
import Company2Logo from './images/company2.png';

// 修改数据结构
export const clientData = {
  clients: [
    { name: 'comapany1', logo: Company1Logo },
    { name: 'company2', logo: Company2Logo },
    // ...其他客户端
  ],
};

4. 确认Preact Compat配置 #

确保项目中已正确配置@preact/compat的别名，避免React和Preact的API冲突：

• Vite配置示例：

// vite.config.js
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      'react': '@preact/compat',
      'react-dom': '@preact/compat',
    },
  },
});

• Webpack配置示例：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'react': '@preact/compat',
      'react-dom': '@preact/compat',
    },
  },
};

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