Apollo Client useQuery的onCompleted中setState不生效及表格渲染问题

核心BUG #

你代码里的useQuery配置项回调名称写错了，Apollo Client规定的成功回调是小写开头的onCompleted，你写的大写开头OnCompleted不会被框架识别执行，所以setHorses从来没有触发过，自然horses始终是空数组，表格也不会渲染出内容。

关于状态更新与渲染的疑问 #

setState执行成功后组件会触发重渲染，表格的遍历逻辑会自动读取最新的horses值完成更新，这个逻辑是没问题的。

修复代码 #

只需要把useQuery的配置项回调名称改成小写即可：

const { data, loading, error} = useQuery(GET_HORSES, {
    // 把OnCompleted改成onCompleted
    onCompleted: (data) => setHorses(data.horses)
});

优化建议 #

你当前的实现其实不需要额外把接口返回的马匹数据存在本地useState里，useQuery返回的data本身就是响应式的，接口请求成功后会自动触发重渲染，你可以直接用data.horses做渲染、筛选逻辑，减少多余的状态维护，避免出现多份数据源不同步的问题：

• 可以删掉const [horses, setHorses] = useState([]);和对应的onCompleted配置
• 表格渲染时直接写data.horses.map(xxx)
• 后续做筛选功能时，只需要把搜索项、年份范围、性别这些筛选条件存在useState里，渲染时用data.horses.filter(筛选逻辑)即可
• 另外不推荐用document.getElementById直接操作DOM拿表单值，建议把所有搜索表单都改成React受控组件，把表单值存在状态里，更符合React的开发规范。

内容的提问来源于stack exchange，提问作者Zack Antony Bucci