0

我正在编写一个 next.js 应用程序，使用 react-table 和 useSWR 从 api/clients 路由获取数据。

const fetchData = (args) => fetch(args).then((res) => res.json())
const { data, fetchError, mutate } = useSWR(session ? ['/api/clients/', session] : null, fetchData)

成功创建表后，用户可以单击“活动/非活动”按钮以使用 api/active 路由更新数据库。现在一切正常，直到这里。

    const changeActive = (props, isVisible) => async (event) => {
        try {
          const urlparam = props
          const response = fetch(`/api/active/${urlparam}`)
          
          mutate({ ...data, active: isVisible })

        } catch(err) {
            // something
        } 
      };

问题是表格没有重新渲染，因此用户无法看到更改，除非他更改 chrome 选项卡并返回，这导致用户单击该按钮多次，因为他认为它不起作用。

当用户单击“活动/非活动”按钮并更新数据库时，我调用 useSWR 为 api/clients 进行变异，但这是 react-table 产生错误的地方：TypeError: data.forEach is not a function

我在父组件中获取数据并将其作为参数发送到子组件。子组件是创建反应表的组件

    <dataTable data={data} mutate={mutate} />;

这是我的反应表声明：

    const tableInstance = useTable({ 
            columns, 
            data 
        }, useFilters, useSortBy, usePagination );
        
    const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
            setFilter,
            pageOptions,
            page,
            state: { pageIndex, pageSize },
            gotoPage,
            previousPage,
            nextPage,
            setPageSize,
            canPreviousPage,
            canNextPage,
        } = tableInstance;
4

0 回答 0