如何有条件地渲染道具和检查未定义，而通过React useHistory传递道具?

Question

我有component1，我重定向用户到其他页面和传递这样的道具

onClick={() =>history.push({pathname: "/student/planandprice", state: {plan: history.plan.courseName, as:history.availableSession}})}>Upgrade</Button>

所以我想在component2上渲染它只有当它不是未定义的，它不是未定义的，当我从component1导航到component2通过onclick因为history.push(useHistory)方法被执行。但是我直接导航到组件2，我得到了未定义错误。我试图检查未定义的值使用条件:{props? props.location.state.as : ""}但它仍然不起作用，并给出"无法读取属性"为"未定义";那么如何检查未定义的值并有条件地渲染它?

Answer 1

尝试使用可选链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

{props ? props?.location?.state?.as : ""}