如何通过Inertia.js将Laravel控制器的模型数据展示到React组件

核心步骤说明 #

Inertia会把后端传递的变量作为props直接注入到指定的React页面组件，你需要通过props接收数据，再用React的数组遍历方法渲染表格行，同时注意组件名冲突问题。

修正后的代码示例 #

1. 页面入口组件（Home.jsx）

Inertia渲染的Home组件会直接拿到后端传递的data，你可以把它传给Table子组件，或者直接在Home里写表格逻辑：

import Table from './Table';

// 接收Inertia传递的data props
export default function Home({ data }) {
  return (
    <div>
      <Table clients={data} />
    </div>
  );
}

2. Table子组件（Table.jsx）

处理数据遍历，注意使用原生<table>标签（避免和组件名Table冲突），并用map()生成表格行：

export default function Table({ clients }) {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>email</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody>
          {/* 遍历客户数据，每个行必须加唯一key（用模型id） */}
          {clients.map(client => (
            <tr key={client.id}>
              <td>{client.name}</td>
              <td>{client.email}</td>
              <td>{client.address}</td>
            </tr>
          ))}
          {/* 空数据处理（可选） */}
          {clients.length === 0 && (
            <tr>
              <td colSpan={3}>暂无客户数据</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

关键注意点 #

• Props接收：后端通过Inertia::render传递的data会自动成为页面组件的props，必须在组件参数中声明接收。
• 组件名冲突：你的React组件名为Table，内部不能再用<Table>，要改成原生HTML的<table>标签，否则会触发无限递归渲染。
• 唯一Key：React遍历数组生成元素时必须加key属性，通常用模型的id字段，这是React的强制要求。
• 字段校验：确保Client模型的name、email、address字段存在，且未被模型的$hidden属性隐藏，否则前端无法读取。

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