遍历数据渲染Div时出现values.map is not a function错误的排查请求

问题原因 #

你传给DemoConfigurator组件的values不是数组，而是普通对象。在App组件中，通过let { skip, take, ...rest } = pageState;解构出的rest是分页配置对象（包含buttonCount、type、info等键值对），而map()是数组的专属方法，对象调用该方法必然抛出values.map is not a function错误。你实际要传递的应该是分页后的products数组，而非分页配置参数。

解决方法 #

1. 修正数据源传递：在App组件的返回值中，将DemoConfigurator的values属性从rest改为分页后的产品数组products.slice(skip, skip + take)。
2. 匹配数据字段渲染：确保DemoConfigurator中的渲染字段与products的实际结构一致（若你的products包含Title、Subtitle、Date字段，则无需调整）。

修改后的代码示例 #

main.jsx（关键修改部分）

// ... 其他代码保持不变
return (
  <React.Fragment>
    <DemoConfigurator
      onChange={(data) =>
        setPageState({
          ...pageState,
          ...data,
        })
      }
      // 替换为分页后的products数组
      values={products.slice(skip, skip + take)}
    />
    <Pager
      skip={skip}
      take={take}
      total={total}
      buttonCount={pageState.buttonCount}
      info={pageState.info}
      type={pageState.type}
      pageSizes={pageState.pageSizes ? pageSizes : undefined}
      previousNext={pageState.previousNext}
      onPageChange={handlePageChange}
    />
  </React.Fragment>
);

DemoConfigurator组件（可选添加空值判断）

import * as React from 'react';
export const DemoConfigurator = (props) => {
  const values = props.values;
  
  // 空值判断，避免无数据时的异常
  if (!values || values.length === 0) {
    return <div>暂无数据</div>;
  }
  
  return (
    <div>
      {values.map((item) => {
        return (
          <div key={item.Title}>
            <h2>subtitle: {item.Subtitle}</h2>
            <h2>date: {item.Date}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
};

修改完成后，DemoConfigurator将接收分页后的产品数组，可正常使用map()方法渲染每条数据对应的div。

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