get undefined in first render and cant get data - reactjs

Question

in this code I got undefined in first render but after that I can get the data
what is the problem?
action
export const getPlanPackage = () => async (dispatch) => {
const { data } = await getMyPlan();
return await dispatch({ type: "SET_PLAN_PACKAGE", payload: data.data });
};
reducer
const initialState = {
planPackage: [],
};
export const packagesReducer = (state = initialState, action) => {
switch (action.type) {
case "SET_PLAN_PACKAGE":
return {
...state,
planPackage: action.payload,
};
default:
return state;
}
};
const { planPackage } = useSelector((state) => state.packagesReducer);
const getDefaultOption = () => {
switch (planPackage?.month) {
case 1:
return 0;
case 6:
return 1;
case 12:
return 2;
default:
return planPackage?.month;
}
};
// OPTIONS
const [userPackage, setUserPackage] = useState(
userOptions[getDefaultOption()] || userOptions[0]
);
console.log(getDefaultOption());
result >>>>
undefined
undefined
undefined
undefined
undefined
1
1
1
1
So here I want to get a number from getDefaultOption() But when I refresh the page it gave me undefiend at first and I cant get the number and showing the data

Answer 1

I am going for a swing in the dark as I cant see the rest of your code, but it looks like month simply does not exist until it comes back from the server.
Your initial state is an empty array but the server returns an object with a month property instead if I am seeing correctly?
In that case you could either A, set the initialState an object with a similar state to what you expect back from the server but with a value of your choosing like so:
const initialState = {
planPackage: { month: 1 }, //set the initial value here
};
Or later in your code it looks like you want to perform a fall back here userOptions[getDefaultOption()] || userOptions[0]. In which case since you have your initial state as an array, unless you do planPackage?.length on the first call it will never be nullish.
This [] === true as is this [1,2] === true however this is false []?.length === false but this is true [1,2]?.length === true. I used ?.length because as I said it looks like you're getting back an object from const { data } = await getMyPlan(); and not an array, and objects don't have the length prototype.
So based on that you may want to do something like this?
const [userPackage, setUserPackage] = useState(
typeof getDefaultOption() === 'undefined' ? userOptions[0] : userOptions[getDefaultOption()]
);
Here we definily check if you get anything back from getDefaultOption() before passing it to userOptions because in it's current form userOptions[getDefaultOption()] // undefined will not fall back to || userOptions[0]. The check needs to be performed before being passed to userOptions[0]