React Table渲染报错：baselineData不可迭代（已确认是数组）

问题场景 #

使用React Table渲染表格时遇到如下问题：

• 硬编码与传入的baselineData prop完全一致的数组时，表格可正常渲染；
• 改用[...baselineData]扩展该prop数据时，触发报错：Uncaught TypeError: baselineData is not iterable；
• React开发者工具显示baselineData确实是对象数组。

相关代码 #

正常渲染的硬编码代码 #

import { useTable } from 'react-table';
import React from 'react';
import SpinnerCustom from '../Spinner.js';

export default function PredictionsTable({
  predictions,
  baselineData,
  loading,
}) {
  const checkIfValueIsNumberAndRound = (x) =>
    typeof x === 'number' ? x.toFixed(2) : 'n/a';

  const data = React.useMemo(() => {
    return [
      {
        make_cut: 0.837075,
        player_name: 'Finau, Tony',
        top_10: 0.42559600288600297,
        top_20: 0.5817631080031079,
        top_5: 0.293940416666667,
        win: 0.105025,
      },
      {
        make_cut: 0.71215,
        player_name: 'Day, Jason',
        top_10: 0.228348582528583,
        top_20: 0.366261590839716,
        top_5: 0.136055932539683,
        win: 0.0341,
      },
      {
        make_cut: 0.719925,
        player_name: 'Harman, Brian',
        top_10: 0.223825056748807,
        top_20: 0.366779750145688,
        top_5: 0.12981958333333302,
        win: 0.032675,
      },
      {
        make_cut: 0.710225,
        player_name: 'Montgomery, Taylor',
        top_10: 0.21918973443223397,
        top_20: 0.352992788086097,
        top_5: 0.130785406746032,
        win: 0.0324,
      },
    ];
  }, [baselineData]);

  const columns = React.useMemo(
    () => [
      {
        Header: 'Player',
        accessor: 'player_name', // accessor is the "key" in the data
      },
      {
        Header: 'Make Cut',
        accessor: 'make_cut',
        Cell: (props) =>
          checkIfValueIsNumberAndRound(props.cell.row.original.make_cut),
      },
      {
        Header: 'Top 20',
        accessor: 'top_20',
        Cell: (props) =>
          checkIfValueIsNumberAndRound(props.cell.row.original.top_20),
      },
      {
        Header: 'Top 10',
        accessor: 'top_10',
        Cell: (props) =>
          checkIfValueIsNumberAndRound(props.cell.row.original.top_20),
      },
      {
        Header: 'Top 5',
        accessor: 'top_5',
        Cell: (props) =>
          checkIfValueIsNumberAndRound(props.cell.row.original.top_20),
      },
      {
        Header: 'Win',
        accessor: 'win',
        Cell: (props) =>
          checkIfValueIsNumberAndRound(props.cell.row.original.top_20),
      },
    ],
    []
  );

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });

  return loading ? (
    <SpinnerCustom />
  ) : (
    <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: 'solid 3px red',
                  background: 'aliceblue',
                  color: 'black',
                  fontWeight: 'bold',
                }}
              >
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>

      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);

          return (
            <tr key={i} {...row.getRowProps()}>
              {row.cells.map((cell, y) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    key={y}
                    style={{
                      padding: '10px',
                      border: 'solid 1px gray',
                      background: 'papayawhip',
                    }}
                  >
                    {cell.render('Cell')}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

触发报错的代码 #

const data = React.useMemo(() => {
  return [...baselineData];
}, [baselineData]);

相关截图 #

React DevTools中的baselineData #

报错信息 #

问题分析 #

虽然DevTools显示baselineData是数组，但报错提示它不可迭代，核心原因是组件初始化阶段baselineData的初始值不是数组。比如父组件异步获取数据时，一开始传递的baselineData是null、undefined或非迭代类型，等到数据请求完成后才更新为数组。而扩展运算符[...]仅支持可迭代对象（数组、字符串、Map等），当baselineData为null/undefined时就会触发该报错。

解决方案 #

方案1：给baselineData设置默认值 #

在组件解构props时直接设置空数组默认值，避免初始值非迭代：

export default function PredictionsTable({
  predictions,
  baselineData = [],
  loading,
}) {
  // ... 其余代码不变
}

方案2：在useMemo中添加类型判断 #

确保只有当baselineData是数组时才执行扩展操作：

const data = React.useMemo(() => {
  return Array.isArray(baselineData) ? [...baselineData] : [];
}, [baselineData]);

方案3：结合loading状态判断 #

利用已有的loading状态，确保数据加载完成后再处理：

const data = React.useMemo(() => {
  return loading ? [] : [...baselineData];
}, [baselineData, loading]);

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