时间戳

首页 > 解决方案 > FlatList 未使用 React Hooks 和 Realm 更新

reactjs - FlatList 未使用 React Hooks 和 Realm 更新

问题描述

我正在编写一个自定义钩子以将其与realm-js一起使用。

export default function useRealmResultsHook<T>(query, args): Array<T> {
  const [data, setData] = useState([]);

  useEffect(
    () => {
      function handleChange(newData: Array<T>) {
        // This does not update FlatList, but setData([...newData]) does
        setData(newData);
      }

      const dataQuery = args ? query(...args) : query();
      dataQuery.addListener(handleChange);
      return () => {
        dataQuery.removeAllListeners();
      };
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [query, ...args]
  );

  return data;
}

在我的组件中：

const MyComponent = (props: Props) => {
  const data = useRealmResultsHook(getDataByType, [props.type]);

  return (
    <View>
      <Text>{data.length}</Text>
      <FlatList
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    </View>
  );
};

在前面的组件中，当执行 时setData(newData)，data.length在Text. 但是，FlatList不会重新渲染，就像数据没有改变一样。

我之前使用了一个 HOC 和一个具有相同行为的渲染道具，它按预期工作。难道我做错了什么？我想避免克隆数据setData([...newData]);，因为这可能是大量数据。

编辑 1

回购以重现它

https://github.com/ferrannp/realm-react-native-hooks-stackoverflow

标签： reactjsreact-nativereact-native-flatlistreact-hooks

解决方案

处理程序中的初始data变量和newDataarg 是指向同一集合的链接。所以它们是相等的，setData(newData)在这种情况下不会触发组件的重新渲染。

将 Realm 集合映射到项目 ID 数组可能会有所帮助。因此，您将始终拥有处于 React 状态的新数组，并且渲染将正确进行。仅检查集合的删除和插入以避免列表的额外重新呈现也很有用。但在这种情况下，您还应该向项目添加侦听器。

function useRealmResultsHook(collection) {
  const [data, setData] = useState([]);

  useEffect(
    () => {
      function handleChange(newCollection, changes) {
        if (changes.insertions.length > 0 || changes.deletions.length > 0) {
          setData(newCollection.map(item => item.id));
        }
      }

      collection.addListener(handleChange);
      return () => collection.removeListener(handleChange);
    },
    []
  );

  return data;
}

推荐阅读