rerendering app page after values change in array with react hooks - react-native

Question

I have a array:
const data: arrdata[] = [
{ iD: "55", tP: "01" },
{ iD: "3f", tP: "00" },
{ iD: "fe", tP: "00" },
];
and want update app page after I change tP value in other app page. Also I am using reactnative navigator. For array rendering I am using map()
I try use useEffect hook (it works if using this hook like timeout update, but this variant have issue - all my modals closing if I try open them). Can someone explain how I should rerender my app page?
Here my code First Page:
interface dTtypes {
iD: string;
tP: string;
}
const moduliaiDT: dTtypes[] = [
{ iD: "55", tP: "01" },
{ iD: "3f", tP: "00" },
{ iD: "fe", tP: "00" },
];
function StackasScreen({ navigation }: { navigation: any }) {
const [moduliaiData, setModuliaiData] = useState(moduliaiDT);
const navigacijosMyktukai = (
moduliaiDT: dTtypes[],
setModuliaiData: React.Dispatch<React.SetStateAction<any[]>>
) => {
navigation.navigate("PageB", { moduliaiDT, setModuliaiData });
};
const testasUpdatui = () => {
if (moduliaiDT.length == 3) {
moduliaiDT.push({ iD: "91", tP: "05" });
} else if (moduliaiDT.length == 4) {
moduliaiDT.push({ iD: "92", tP: "05" });
}
setModuliaiData([...moduliaiDT]);
};
return (
<View style={styles.body}>
<Text>{moduliaiDT.length}</Text>
{moduliaiData.map((modulis) => {
return (
<View style={styles.item} key={modulis.iD}>
<Text style={styles.tekstas}>
ID:{modulis.iD}, Type:{modulis.tP}
</Text>
</View>
);
})}
<Button onPress={() => testasUpdatui()} title="Add" />
<Button
onPress={() => navigacijosMyktukai(moduliaiDT, setModuliaiData)}
title="go page B"
/>
</View>
);
}
And page B:
export default function TestingScreen({
navigation,
route,
}: {
navigation: any;
route: any;
}) {
const { moduliaiDT, setModuliaiData } = route.params;
const [moduliaiDatas, setModuliaiDatas] = useState(moduliaiDT);
const navigacijosMyktukai = (moduliaiDT: any) => {
navigation.navigate("PageA", { moduliaiDT });
setModuliaiData(moduliaiDatas);
};
const testasUpdatui = () => {
//setModuliaiDatas([...moduliaiDatas, {iD: '90', tP: '04'}]);
//moduliaiDT.push({iD: '90', tP: '04'});
if (moduliaiDT.length == 4) {
moduliaiDT[3] = { iD: "44", tP: "08" };
} else if (moduliaiDT.length == 5) {
moduliaiDT[4] = { iD: "45", tP: "09" };
}
setModuliaiDatas([...moduliaiDT]);
};
return (
<View style={styles.body}>
<Text>TestScreen</Text>
{moduliaiDatas.map(
(modulis: {
iD: React.Key | null | undefined;
tP:
| string
| number
| boolean
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
| React.ReactFragment
| React.ReactPortal
| null
| undefined;
}) => {
return (
<View style={styles.item} key={modulis.iD}>
<Text style={styles.tekstas}>
ID:{modulis.iD}, Type:{modulis.tP}
</Text>
</View>
);
}
)}
<Button onPress={() => testasUpdatui()} title="Change data" />
<Button onPress={() => navigacijosMyktukai(moduliaiDT)} title="Go back" />
</View>
);
}
in page B i get error :
Non-serializable values were found in the navigation state
I found solution for this error:
import { LogBox } from "react-native";
LogBox.ignoreLogs([
"Non-serializable values were found in the navigation state",
]);
This code working but maybe is better solution?