当带有“useSortBy”钩子的组件关闭时，点击的结果列表会被重置

Question

我正在使用“import { useSortBy } from “react-instantsearch-hooks”，在expo项目（react native）中创建一个排序下拉列表。这个按组件排序位于父组件内部，它像模型一样打开。

问题：当我打开过滤器组件并选择不同的过滤器（例如按价格降序，价格升序）时，排序工作正常，但是一旦我关闭模型，整个短列表结果就会重置......基本上结果不坚持我选择的排序结果。

视频：https://youtu.be/J5uZF01lVtU

pic1：排序之前，结果如图：

pic2：我单击过滤器，它显示类似于模型的组件，我可以在其中选择下拉过滤器，单击 desc 后的结果（工作正常，过滤器屏幕仍然显示）：

pic3：一旦我单击过滤器图标以删除过滤器屏幕，结果不会按照降序坚持价格，它会重置为原始结果：

这里是snack中的源代码： https://snack.expo.dev/@rosnk/algoli_sortby_example_buggy

注意：（零食代码完全没问题……零食在 algolia 的导入行上显示错误……就在这一行：

import { InstantSearch } from "react-instantsearch-hooks";

Answer 1

当您通过 setFilterVisible 函数更新状态时，SearchPage 组件及其子组件将重新渲染。为了避免不必要的重新渲染，您可以用 memo 包装显示结果的组件。

Answer 2

@rosnk

您好，先生，您能帮我解决 Algolia useSortBy 问题吗？ 您为此创建了副本索引吗？

这是排序选项：

  const sortByItems = [
    { value: "items_search", label: "Default" },
    { value: "price_asc", label: "Price (asc)" },
    { value: "price_desc", label: "Prics (dsec)" },
  ];

这是我用于排序的组件：

import { useSortBy } from "react-instantsearch-core";
import { Text, View } from "react-native";
import RadioButtonGroup, { RadioButtonItem } from "expo-radio-button";

const CustomSortBy = (props) => {
  const {
    currentRefinement,
    options,
    refine: refineSortBy,
  } = useSortBy({ items: props.items });

  return (
    <View className="border-b border-b-slate-200">
      <Text className="labelText font-extrabold text-md dark:text-white my-3">
        Sortera
      </Text>

      <View className="p-1 rounded-md">
        <RadioButtonGroup
          containerStyle={{ marginBottom: 10 }}
          selected={currentRefinement}
          onSelected={(value) => refineSortBy(value)}
          containerOptionStyle={{ margin: 5 }}
          radioBackground="black"
          radioStyle={{ width: 22, height: 22 }}
        >
          {options.map((item) => (
            <RadioButtonItem
              key={item.value}
              value={item.value}
              label={<Text style={{ color: "black" }}>{item.label}</Text>}
            />
          ))}
        </RadioButtonGroup>
      </View>
    </View>
  );
};

export default CustomSortBy;

我收到“可能未处理的承诺拒绝（id：0）”