typescript-xxx-is-not-a-function

介绍

今天写代码的时候遇到如下错误：

1	Uncaught ReferenceError: rawData.some is not a function

为了便于理解，我截了一个图：

这个错误也算是typescript中比较常见的错误了，以前曾多次遇到，但是从未认真思考过，今天就来仔细分析一下它，如果对一个错误了解的不够深，就会导致你一直惧怕它，一直想回避它，所以每次遇到这个错误的时候，第一反应就是要去网上搜索解决办法，而忽略了问题产生的根源。

错误分析

这个错误分为两个部分，第一部分阐明了错误的原因，请看第一个红框中的内容：

1	Uncaught ReferenceError: rawData.some is not a function

这里的rawData是一个变量名，some是一个函数名，我们都知道some是js中数组对象上的一个方法，它的作用是判断数组中是否有满足条件的元素，如果有则返回true，否则返回false。这个错误的意思是：rawData不是一个数组，所以不能调用some方法。

从这个错误的调用栈可以看到，都是框架底层的代码，并没有应用级别的代码，而框架级别的代码是不可能出现类型错误的，所以这个错误一定是应用级别的代码引起的，继续往下看。

来到第二个红框中的内容：这是错误的第二个部分，它反映的是错误发生的位置，这里面Users就是业务代码对应的组件了，而Users上面一行是Table组件，也就是Ant Design中的表格组件。这说明我们的Users组件在使用Table组件时，导致了这个错误。

到这里，基本可以推断出错误的原因了，那就是在一个需要数组的地方传入了一个非数组的变量，而框架内部代码在调用some方法时，发现这个变量不是数组，所以抛出了这个错误。

于是来到Users组件的代码，看看是哪里传入了非数组的变量。Table组件用到数组变量的地方基本就是两个，一个是columns，一个是dataSource。讲过检查，发现是dataSource传入了一个非数组的变量。

import Table from 'antd/es/table';
import { useEffect, useState } from 'react';
import { User } from './User';
import { fetchUsers } from './UserAPI';

export default function Users() {
  const [tableData, setTableData] = useState<User[]>([]);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    // ...
  ];

  useEffect(() => {
    fetchUsers().then((res) => {
      setTableData(res.data); // res.data不是数组！
    });
  }, []);

  return <Table dataSource={tableData} columns={columns}></Table>;
}

由于疏忽，fetchUsers返回的res.data并不是一个数组，而是一个对象，所以在传入Table组件时，导致了这个错误。
解决这个问题很简单，只需要修改fetchUsers函数，确保它返回一个数组即可。

至此，问题完美解决，更重要的是，我们对于这个错误的理解也更加深入了。以后再遇到类似的错误时，就不会再感到困惑了。

今天就到这里了，我们明天再见。