react使用antdPro,删除数据后,不调用接口直接重新渲染页面?

新手上路,请多包涵

需要实现这样一种需求

react前端使用proTable展示数据,要求点击删除某条数据后,将要删除的数据通过接口发送到后台,后台成功删除数据
前端不调用接口直接展示删除一条数据后的table,保证页面不出现reload效果

问题

按照我现在的代码写,还是会通过后端接口获取数据,页面有一次reload的效果,有什么办法解决吗?

我的部分代码如下:

const TableList: React.FC = () => {
  const [dataList, setDataList] = useState<any[]>([]);
  const [dataListTotal, setDataListTotal] = useState<number>(0);
  const [selfParams, setSelfParams] = useState<any>({ deleteUpdate: null, analysisUpdate: null });

// 点击删除的回调
const handleDelete = async (data: STUDY.ListItem, index: any) => {
    const resultData = await deleteStudy(BigInt(data!.id));
    if (resultData?.message === 'OK.') {
      setSelfParams({
        deleteUpdate: `deleteIndex-${index}`,
      });
    }
  };

// proTable
const columns: ProColumns<STUDY.ListItem>[] = [
/* 其他表格项
 *...
 */
    { title: "删除",
      dataIndex: 'Action',
      search: false,
      render: (_list, row, index) => {
        <Popconfirm title="确认删除?" onConfirm={() => handleDelete(row, index)}>
            <span className="deleteOpt">删除</span>
        </Popconfirm>
    )}
    },
  },
];

const initList = async (paramsData: STUDY.PageParams) => {
    const isNotNull = keys(paramsData).filter((key: string) => paramsData[key]);
    const params = pick(paramsData, isNotNull);

    // 删除
    if (params.deleteUpdate) {
      const getIndex = params.deleteUpdate.split('-')[1];

// 如果不将deleteUpdate设置为undefined,点击换页前台依然会继续删除数据,刷新后才恢复正常
      setSelfParams({
        deleteUpdate: undefined,
      });


      const storeData = [...dataList];
      storeData.splice(Number(getIndex), 1);
      setDataList(storeData);
      message.info(formatMessage({ id: 'pages.form.deleteSuccess' }));
      return {
        data: storeData,
        total: dataListTotal - 1,
        success: true,
      };
    }
    
    // 调用接口获取表单数据
    const getDataResult = await getStudyList(params);
    if (getDataResult) {
      const {
        data: { resultList, total },
      } = getDataResult;
      setDataList(resultList);
      setDataListTotal(total);
      return {
        data: resultList,
        total: total,
        success: true,
      };
    } else {
      setDataList([]);
      setDataListTotal(0);
      return {
        data: [],
        total: 0,
        success: false,
      };
    }
  };

return (
    <div>
      <PageContainer>
        <ProTable>
          pagination={{
            showSizeChanger: true,
          }}
          beforeSearchSubmit={(params: any) => {
            setSelfParams({ deleteUpdate: null, analysisUpdate: null });
            return {
              ...params,
              deleteUpdate: null,
              analysisUpdate: null,
            };
          }}
          params={selfParams}
          actionRef={ref}
          columns={columns}
          search={{
            labelWidth: 'auto',
          }}
          request={initList}
          rowKey="id"
        />
      </PageContainer>
    </div>
  );
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题