如何在通过 React useHistory 传递道具时有条件地渲染道具并检查未定义的道具？答案

【问题标题】：How to render props conditionally and checking for undefined, while passing props via React useHistory?如何在通过 React useHistory 传递道具时有条件地渲染道具并检查未定义的道具？
【发布时间】：2021-03-03 13:00:07
【问题描述】：

我有组件1，我将用户重定向到其他页面并像这样传递道具

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

所以我只想在它未定义时在组件2上呈现它，当我通过onclick从组件1导航到组件2时它不是未定义，因为执行history.push(useHistory)方法。但是我直接导航到组件 2，我得到未定义的错误。我尝试使用条件检查未定义的值： {props? props.location.state.as : ""} 但它仍然无法正常工作并给出“无法读取未定义的属性'as'”那么如何检查未定义的值并有条件地呈现它？

【问题讨论】：

标签： javascript reactjs routes react-router-dom

【解决方案1】：

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

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

【讨论】：

这个解决方案有效，但是你能用简单的话解释一下它背后的基本逻辑吗？我可以检查文档，但它看起来有点令人生畏并且信息过多
当然可以。基本上，它在移动到下一个键之前检查问号之前的键是否已定义/存在。如果它不存在，则停止检查并且整个表达式基本上读为“false-y”。这有帮助吗？