I have an object in my store that I can being updated when actions are dispatched. But I'm not seeing the updated value for totalDevices displayed on the page. It stays with the original render. What am I doing wrong?
State
{
deviceCount: {
'projectId:ed4b4e40-d4e2-4540-8359-c002526f2793': {
totalDevices: 1,
error: {}
},
'projectId:a6293167-ade2-4e22-98f0-70260fcee7f7': {
totalDevices: 0,
error: {}
}
}
}
Component
const selectDeviceCount = useSelector((state) => state.deviceCount);
const [currDeviceCount, setCurrDeviceCount] = useState(selectDeviceCount); // Using to display value of totalDevices for each item in object
useEffect(() => {
loadDeviceCountByProjectID({ projectId });
}, [loadDeviceCountByProjectID]);
useEffect(() => { // Should this hook trigger a rerender on currDeviceCount?
setCurrDeviceCount(
selectDeviceCount
);
}, [selectDeviceCount]);
return (
<ListItem
className={variation === 'block' ? classes.listItem : ''}
key={projectId}
button
component={Link}
to={`/${organizationName}/${name}?per_page=10&page=1`}
>
<ListItemText>
{name}
</span>
}
/>
<ListItemAvatar className={classes.devicesAvatar}>
<>
<TabletAndroidIcon className={classes.deviceIcon} />
<Typography variant="caption">
// Conditional rendering to prevent errors when state is undefined on first load
{selectDeviceCount.length > 0
? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
: 0}
</Typography>
</>
</ListItemAvatar>
</ListItem>
);
Your use of hooks is fine, and your state should be changing. But you're measuring selectDeviceCount.length in your render, but selectDeviceCount is an object, and therefore has a length of 0. If you want to measure the number of keys inside the selectDeviceCount object, do Object.keys(selectDeviceCount).length
To mitigate selectDeviceCount being undefined, simply initialize the state to an empty object by doing useState({})
Below is the area where your code has the issue.
<Typography variant="caption">
// Conditional rendering to prevent errors when state is undefined on first load
{Object.keys(selectDeviceCount).length > 0
? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
: 0}
</Typography>