使用react-instantsearch-hooks的useSortBy关闭模态框后排序结果重置问题

问题场景 #

在Expo（React Native）项目中，使用useSortBy创建的排序下拉菜单嵌套在模态框组件内时，会出现异常：打开模态框选择排序规则（如价格升/降序）时排序即时生效，但关闭模态框后，结果列表会自动重置回初始排序状态，无法保留用户的选择。

核心原因 #

1. 模态框卸载导致状态丢失：如果模态框通过条件渲染（比如{visible && <SortModal />}）控制显示，关闭时组件会被完全卸载，useSortBy关联的排序状态也会被销毁，重新打开时会初始化新的状态。
2. 组件层级上下文问题：若useSortBy的调用层级过深（仅在模态框内部），模态框的挂载/卸载会干扰InstantSearch的状态同步逻辑。

可行解决方案 #

方案1：将排序状态提升到模态框外的父组件

把useSortBy的调用移到和InstantSearch同层级的父组件中，通过props将排序相关的方法和状态传递给模态框内的下拉组件。这样即使模态框卸载，排序状态依然由父组件持有，不会丢失。

示例代码：

// 父组件（被InstantSearch包裹）
import { useState } from 'react';
import { Button, View } from 'react-native';
import { useSortBy } from "react-instantsearch-hooks";
import SortModal from './SortModal';
import ResultsList from './ResultsList';

function ProductSearch() {
  // 在父组件中初始化排序逻辑
  const { items, currentRefinement, refine } = useSortBy({
    items: [
      { value: "products_default", label: "默认排序" },
      { value: "products_price_asc", label: "价格升序" },
      { value: "products_price_desc", label: "价格降序" },
    ],
  });

  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View>
      <Button title="打开排序筛选" onPress={() => setIsModalVisible(true)} />
      {/* 将排序状态和方法传递给模态框 */}
      <SortModal
        visible={isModalVisible}
        onClose={() => setIsModalVisible(false)}
        sortItems={items}
        currentSort={currentRefinement}
        onSortChange={refine}
      />
      {/* 结果列表组件 */}
      <ResultsList />
    </View>
  );
}

// 模态框组件
import { Modal, Picker, Button, View } from 'react-native';

function SortModal({ visible, onClose, sortItems, currentSort, onSortChange }) {
  return (
    <Modal visible={visible} onRequestClose={onClose}>
      <View style={{ padding: 20 }}>
        <Picker
          selectedValue={currentSort}
          onValueChange={(value) => onSortChange(value)}
        >
          {sortItems.map(item => (
            <Picker.Item
              key={item.value}
              label={item.label}
              value={item.value}
            />
          ))}
        </Picker>
        <Button title="关闭" onPress={onClose} style={{ marginTop: 20 }} />
      </View>
    </Modal>
  );
}

方案2：避免模态框被完全卸载

使用React Native自带的Modal组件时，不要通过条件渲染控制组件的存在，而是始终保持组件挂载，仅通过visible属性控制显示/隐藏。这样模态框内部的useSortBy状态会被保留，不会随模态框关闭而销毁。

方案3：持久化InstantSearch状态

通过InstantSearch的searchState和onSearchStateChange属性手动持久化排序状态，比如存在useState或AsyncStorage中，确保组件重新渲染时能恢复之前的排序选择。

注意事项 #

• 确保InstantSearch组件包裹了所有使用useSortBy和结果列表的组件，保证上下文的正确性。
• 若使用第三方模态库，需确认其是否会在隐藏时卸载组件，必要时调整库的配置避免状态丢失。

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