react-admin排序时getList调用两次及页面点击重复请求问题咨询

1. 排序时getList重复调用的原因及修复 #

你写的handleSort函数存在两个关键问题，导致服务器被请求两次：

• 直接修改状态原对象：你直接修改了sort状态的field或order属性，再调用setSort(sort)。React的状态更新依赖引用变更，直接修改原对象会导致状态更新逻辑异常，可能触发不必要的重渲染或请求。
• 手动调用refresh()画蛇添足：在react-admin中，List组件会自动监听sort状态的变化，一旦状态更新就会触发getList请求数据。你在setSort后又手动调用refresh()，等于主动触发了第二次请求。

修复后的代码：

const handleSort = (key) => {
    console.log("key for sorting        :", key);
    const { field, order } = sort;
    
    const newSort = field === key 
        ? { ...sort, order: order === "ASC" ? "DESC" : "ASC" }
        : { ...sort, field: key, order: "ASC" }; // 默认新排序字段用升序，保持逻辑一致

    setSort(newSort);
    // 移除refresh()，状态更新后List会自动发起请求
};

2. 点击页面任意位置触发getList的解决方法 #

这种情况一般由以下原因导致：

• 表单元素未正确处理默认行为：页面中的输入框、按钮等表单元素，若未阻止默认点击/提交行为，可能意外触发react-admin的URL参数变化或状态更新，进而触发List重新请求。
• 全局点击监听干扰：如果代码中添加了全局click事件监听，逻辑处理不当可能误更新List相关的sort/filter状态，导致getList被调用。
• 自定义组件事件绑定错误：你写的自定义排序、筛选组件，可能在点击时意外触发了refresh或状态更新操作。

控制该行为的方案：

• 修正表单元素事件：对所有表单元素的点击、提交事件添加event.preventDefault()，阻止不必要的默认行为。
• 排查全局事件监听：移除不必要的全局点击监听，或在监听逻辑中增加判断条件，避免误触发List的状态更新。
• 手动控制List刷新逻辑：通过List组件的options参数配置请求规则，比如禁止窗口聚焦时自动刷新：

import { List, Datagrid } from 'react-admin';

const CustomList = (props) => {
    return (
        <List
            {...props}
            options={{
                refetchOnWindowFocus: false,
                refetchOnMount: true, // 根据业务需求调整是否挂载时请求
            }}
        >
            <Datagrid>
                {/* 列定义 */}
            </Datagrid>
        </List>
    );
};

• 检查自定义组件：排查自定义排序、筛选组件的事件绑定，确保点击操作不会意外触发额外的状态更新或refresh。

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