在第一次渲染中未定义，无法获取数据

Question

在这段代码中，我在第一次渲染中没有定义，但之后我可以获得数据

问题出在哪里？

动作

export const getPlanPackage = () => async (dispatch) => {
const { data } = await getMyPlan();
return await dispatch({ type: "SET_PLAN_PACKAGE", payload: data.data });
};

减速器

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

所以在这里我想从getDefaultOption()中获得一个数字，但当我刷新页面时，它一开始给了我unfriend，我无法获得数字并显示数据

Answer 1

我将在黑暗中摇摆，因为我看不到您的其余代码，但在从服务器返回之前，月份似乎根本不存在。

您的初始状态是一个空数组，但如果我看对了，服务器会返回一个具有month属性的对象吗？

在这种情况下，您可以选择A，将initialState设置为一个与您期望从服务器返回的状态类似的对象，但具有您选择的值，如：

const initialState = {
planPackage: { month: 1 }, //set the initial value here
};

或者稍后在代码中，看起来您希望在此处执行回退userOptions[getDefaultOption()] || userOptions[0]。在这种情况下，由于您的初始状态是一个数组，除非您在第一次调用中执行planPackage?.length，否则它永远不会为零。

这个[] === true和这个[1,2] === true一样，然而这是假[]?.length === false，但这是真[1,2]?.length === true。我使用?.length是因为正如我所说，看起来你从const { data } = await getMyPlan();中得到的是一个对象，而不是一个数组，而且对象没有长度原型。

因此，基于此，你可能想做这样的事情？

const [userPackage, setUserPackage] = useState(
typeof getDefaultOption() === 'undefined' ? userOptions[0] : userOptions[getDefaultOption()]
);

在这里，我们定义性地检查在将其传递给userOptions之前是否从getDefaultOption()返回了任何内容，因为在它的当前形式中，userOptions[getDefaultOption()] // undefined不会回退到|| userOptions[0]。在传递给userOptions[0]之前需要进行检查