Я пишу пользовательский хук, чтобы использовать его с 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