In my react app (using Flow for type checking), I have the following setup:
type Filter = {
title: string,
value: string
};
export type State ={
filter: Array<Filter>
}
export type Actions<T> = {
setFilters: (filter: Array<Filter>) => T
}
In my component, I need to merge the newly created/modified data with the previous array object in the state.
I am initializing the state in useEffect based upon some conditions. The first setState() (inside first if() check) works fine.
But during the second setState(), I get the following error:
Cannot call `setFilters` with function bound to `filter` because function [1] is incompatible with array type [2]
Where,
1 denotes
setFilters((prevState) => {
return [...prevState, ...newData];
});
and [2] denotes setFilters: (filter: Array<Filter>) => T
//
.....
useEffect(() => {
if (current) {
setFilters([
{
title: 'abc',
value: '1'
},
]);
}
if (current && old) {
const newData = old.map((datum) => ({
title: datum.title,
value: datum.value,
}));
setFilters((prevState) => {
return [...prevState, ...newData];
});
}
}, [current, old]);
.....
//
Sample data:
const old = [
{
title: 'oldabc',
value: '1',
status: 'expired',
count: 2
},
{
title: 'oldxyz',
value: '2',
status: 'pending',
count: 4
},
....
];
the final result required:
[
{
title: 'abc',
value: '1'
},
{
title: 'oldabc',
value: '2',
},
{
title: 'oldxyz',
value: '3'
},
....
]
I am pretty sure there is some silly fix that I am missing, but still unable to figure out how to resolve it. Any help to resolve the same will be appreciated!
