如何通过React State管理API数据，实现删除行后更新表格？

问题核心分析 #

• 初始State初始化错误：用useMemo初始化useState无法响应apiData的异步更新，导致State无数据可管理
• 表格数据源未关联State：useTable使用原始的resourcesData而非State中的datas，删除操作后表格无法自动刷新
• 删除逻辑顺序不合理：先更新State再调用API，易出现前端与后端数据不一致的情况
• 依赖处理缺失：未监听API数据变化同步State，导致初始State无法获取异步加载的接口数据

修复后的完整代码 #

import React, { useMemo, useEffect, useState } from 'react';
import { useSortBy, useTable, usePagination } from 'react-table';
import apiData from '../../../modules/searchCards/apiHooks/apiData.js';
import DeleteModal from '../../../DeleteModal/index.jsx';
import axios from 'axios';
/* eslint-disable react/prop-types */

const useTableResource = () => {
  const { data: apiResponseData } = apiData();
  // 初始化State，后续通过useEffect同步API数据
  const [datas, setData] = useState([]);

  // 监听API返回数据，同步更新State
  useEffect(() => {
    if (apiResponseData) {
      setData(apiResponseData);
    }
  }, [apiResponseData]);

  const resourcesDataLength = datas.length;

  const resourcesColumns = useMemo(() => [
    {
      id: 'delete',
      accessor: () => 'delete',
      disableSortBy: true,
      Cell: ({ row }) => (
        <div 
          onClick={(event) => event.stopPropagation()} 
          style={{ display: 'flex', justifyContent: 'center' }}
        >
          <DeleteModal 
            delb={async () => {
              try {
                // 先执行后端删除请求，成功后再更新前端State
                await axios.delete(`api/resources?_id=${row.original._id}`);
                // 用_id过滤数据，避免分页/排序后index失效的问题
                setData(prevData => prevData.filter(item => item._id !== row.original._id));
              } catch (error) {
                console.error('删除操作失败:', error);
                // 可在此添加错误提示逻辑
              }
            }}
          />
        </div>
      )
    }
  ], []);

  const tableInstance = useTable({
    columns: resourcesColumns,
    data: datas, // 关联State中的数据作为表格数据源
    disableSortRemove: true,
  }, useSortBy, usePagination);
   
  return {
    tableInstance,
    resourcesColumns,
    resourcesDataLength
  };
};

export default useTableResource;

关键修复点说明 #

• State同步逻辑：通过useEffect监听API返回的apiResponseData，接口数据加载完成后自动同步到State，确保State能获取到异步数据
• 表格数据源绑定：将useTable的data参数改为State中的datas，State更新时表格会自动重新渲染
• 删除逻辑优化：先调用后端删除接口，成功后再更新前端State，避免前端显示与后端数据不一致；同时改用_id过滤数据，比依赖行index更可靠（解决分页、排序后index混乱的问题）
• 函数式State更新：使用setData(prevData => ...)确保获取到最新的State值，避免闭包导致的旧数据问题

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