I am trying to set the vehicles array to the array that I am getting from the store. However, it seems that Typescript is complaining about something.
My model looks like this:
import { types } from 'mobx-state-tree';
export const Vehicle = types.model('Vehicle', {
model: types.string,
vrm: types.string,
});
export const VehicleDetails = types.model('Vehicle Details', {
policyNumber: types.string,
vehicles: types.array(Vehicle),
});
I'm trying to use the store here:
export const VehicleDetails: React.FC = observer(() => {
const { dashboardStore } = useStores();
const [policyNumber, setPolicyNumber] = useState<string | null>('');
const [vehicles, setVehicles] = useState<Instance<typeof Vehicle[]> | null>(null);
useEffect(() => {
if (!dashboardStore.dashboard) {
if (!dashboardStore.isLoading) {
dashboardStore.fetchPolicyDetails('P0000700587');
}
}
}, []);
useEffect(() => {
if (dashboardStore.vehicleDetails) {
const { policyNumber, vehicles } = dashboardStore.vehicleDetails;
setPolicyNumber(policyNumber);
setVehicles(clone(vehicles) as Instance<typeof Vehicle[]>);
}
}, [dashboardStore.vehicleDetails]);
However, it seems I cannot get past this error where
setVehicles(clone(vehicles) as Instance<typeof Vehicle[]>);
gives me an error.
The error I receive is the following:
Conversion of type 'IMSTArray<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>> & IStateTreeNode<...>' to type 'IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Types of property 'push' are incompatible.
Type '{ (...items: ({ model: string; vrm: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>>)[]): number; (...items: ExtractCSTWithSTN<...>[]): number; }' is not comparable to type '(...items: IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>[]) => number'.
Types of parameters 'items' and 'items' are incompatible.
Type 'IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>' is not comparable to type '{ model: string; vrm: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>>'.
It seems your types for useState
are incorrect. It should be:
type VehicleType = Instance<typeof Vehicle>;
// ...
const [vehicles, setVehicles] = useState<VehicleType[] | null>(null);