antd v3 List给dataSource传回调报非可迭代实例错误的原因是什么？

这两种写法完全不等价，报错属于符合预期的正常行为，和组件库无关，是入参类型不符合组件要求导致的。

核心原理说明 #

• antd v3 版本的 List 组件dataSource属性明确要求接收数组类型的数据源，你直接传递someArray时，组件内部拿到的是可迭代的数组实例，不管是做扩展运算、map遍历都符合逻辑，自然不会报错。
• 你写dataSource={() => someArray}时，实际传递给属性的是函数对象本身，而不是函数执行后返回的数组。函数不属于可迭代对象，组件内部按照数组逻辑处理dataSource时（比如执行[...dataSource]这类操作），就会抛出你看到的非可迭代实例展开错误。

修正方案 #

如果确实需要通过回调逻辑生成数据源，要主动执行函数拿到返回值再传入，写法如下：

<List dataSource={ (() => {
  // 这里可以放生成数组的业务逻辑
  return someArray
})() } />

也可以把生成数组的逻辑抽到JSX渲染逻辑之外，先计算得到数组后再直接传入，避免在JSX里写自执行函数降低代码可读性。

常见误区提醒：不要把纯数据属性和渲染回调属性的入参要求搞混，类似renderItem这类属性本身要求传入函数，所以直接传函数即可，但dataSource是纯数据属性，必须传入数据本身。

内容的提问来源于stack exchange，提问作者Ali Can Almaçimeni