ReactJS中使用Map函数渲染数据库表格行遇object未定义问题

Hey there! Let's break down what's causing both the single-row render issue and that frustrating "object is not defined" error, then fix them step by step.

Why You're Only Seeing One Row #

The most likely culprit is that the data you're fetching from the database is a single object, not an array of objects. React uses map() to render lists of elements, and if you pass a single object to map(), it'll either run once (if the object is iterable) or throw an error (if not). Either way, you'll only get one row.

First, check what your fetched data looks like. Add a console log right after you get the data:

console.log('Fetched table data:', yourDataVariable);

If the output is a single object (not wrapped in []), you need to convert it to an array before rendering:

// Wrap single object in an array, or keep it as-is if it's already an array
const tableData = Array.isArray(yourDataVariable) ? yourDataVariable : [yourDataVariable];

Why "object is not defined" Happens #

This error means you're trying to use a variable named object that doesn't exist in the current scope. When rendering table rows with map(), you need to assign a name to each item in the array (like row or item) and use that name to access properties.

For example, instead of writing {object.title}, you should use the variable you defined in the map() callback:

<table>
  <thead>
    <tr>
      <th>Title</th>
      {/* Add other table headers here */}
    </tr>
  </thead>
  <tbody>
    {tableData.map((row, index) => (
      {/* Always use a unique key for list items — prefer a data ID over index if possible */}
      <tr key={row.id || index}>
        <td>{row.title}</td> {/* Use row.title, not object.title */}
        {/* Add other table cells here */}
      </tr>
    ))}
  </tbody>
</table>

Bonus: Handle Loading & Empty States #

To avoid more errors (like if your data takes time to load or comes back empty), add checks for those cases:

{tableData ? (
  <tbody>
    {tableData.length > 0 ? (
      tableData.map((row, index) => (
        <tr key={row.id || index}>
          <td>{row.title}</td>
        </tr>
      ))
    ) : (
      <tr>
        <td colSpan="*">No data found</td>
      </tr>
    )}
  </tbody>
) : (
  <tbody>
    <tr>
      <td colSpan="*">Loading data...</td>
    </tr>
  </tbody>
)}

Putting it all together, you should have a table that renders all your rows without that undefined variable error.

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