javascript - 在表格组件之外定义的默认列，破坏了代码

Question

如果未调用默认列之外的定义（未定义单元格和过滤器函数）并且我收到此错误错误：渲染器错误☝️，参考代码，

export const defaultColumn = {
    // Set our editable cell renderer as the default Cell renderer
    Cell: EditableCell,
    // Let's set up our default Filter UI
    Filter: FilterRow,
};


const CustomTable: FC<CustomTableProps> = (props) => {
    const {
        columns,
        data,
        setData,
        updateMyData,
        skipPageReset,
        updateGuest,
        deleteGuest,
        selectedProjectId,
    } = props;

    const {
        getTableProps,
        headerGroups,
        prepareRow,
        page,
        gotoPage,
        setPageSize,
        preGlobalFilteredRows,
        setGlobalFilter,
        state: { pageIndex, pageSize, selectedRowIds, globalFilter },
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            autoResetPage: !skipPageReset,
            // updateMyData isn't part of the API, but
            // anything we put into these options will
            // automatically be available on the instance.
            // That way we can call this function from our
            // cell renderer!
            selectedProjectId,
            updateMyData,
            updateGuest,
        },
        useGlobalFilter,
        useFilters,
        useSortBy,
        usePagination,
        useRowSelect,

但是如果我将这个 defaultColumn 对象放在 CustomTable 中，那么代码就可以正常工作，如下所示，

const CustomTable: FC<CustomTableProps> = (props) => {
    const defaultColumn = {
        // Set our editable cell renderer as the default Cell renderer
        Cell: EditableCell,
        // Let's set up our default Filter UI
        Filter: FilterRow,
    };

    const {
        columns,
        data,
        setData,
        updateMyData,
        skipPageReset,
        updateGuest,
        deleteGuest,
        selectedProjectId,
    } = props;

    const {
        getTableProps,
        headerGroups,
        prepareRow,
        page,
        gotoPage,
        setPageSize,
        preGlobalFilteredRows,
        setGlobalFilter,
        state: { pageIndex, pageSize, selectedRowIds, globalFilter },
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            autoResetPage: !skipPageReset,
            // updateMyData isn't part of the API, but
            // anything we put into these options will
            // automatically be available on the instance.
            // That way we can call this function from our
            // cell renderer!
            selectedProjectId,
            updateMyData,
            updateGuest,
        },
        useGlobalFilter,
        useFilters,
        useSortBy,
        usePagination,

那么为什么方法一不起作用？

标签： javascriptreactjsobjectreduxreact-table-v7