React组件接收props传递的Date为undefined 调用方法报错如何解决

问题复现 #

子组件CalenderDate.js中尝试读取props.date调用日期方法，控制台抛出错误：

Cannot read properties of undefined (reading 'toLocaleString')

相关代码如下：
子组件代码：

function CalenderDate(props) {
    return (
        <div className="date">
            <div>
                <div>{props.date.toLocaleString('en-US', { month: 'long' })}</div>
                <div>Date</div>
                <div>Year</div>
            </div> 
        </div>
    )
}

父组件App.js代码：

function App() {
const array = [
{
 date: new Date(2020, 11, 23),
 words:"string of text"},
{
 winningNumber: 7,
 message: "Winning Number 7"}
]

return(
<>
<CalenderDate date = array[0].date></CalenderDate>
</>
)
}

核心错误原因 #

JSX语法规则中，只有传递静态字符串类型的prop时可以直接写属性值，如果要传递变量、数字、对象、数组、函数这类JavaScript表达式类型的值，必须用{}将值包裹，告诉编译器这是需要执行的JS代码，不是普通字符串。
你当前的写法<CalenderDate date = array[0].date>没有加花括号，React不会解析array[0].date这个变量，最终子组件接收到的props.date就是undefined，调用方法自然报错。

修复方案 #

1. 修正父组件传值语法 #

给传入的date值加上花括号包裹即可：

function App() {
  const array = [
    {
      date: new Date(2020, 11, 23),
      words:"string of text"
    },
    {
      winningNumber: 7,
      message: "Winning Number 7"
    }
  ]

  return(
    <>
      {/* 非字符串值用{}包裹传递 */}
      <CalenderDate date={array[0].date}></CalenderDate>
    </>
  )
}

2. （可选）子组件增加容错逻辑 #

避免后续因为传值异常、父组件加载延迟等问题导致页面崩溃，可以给props加默认兜底：

function CalenderDate(props) {
  // 未接收到合法date时，默认使用当前日期兜底
  const renderDate = props.date instanceof Date ? props.date : new Date();
  return (
    <div className="date">
      <div>
        <div>{renderDate.toLocaleString('en-US', { month: 'long' })}</div>
        <div>{renderDate.getDate()}</div>
        <div>{renderDate.getFullYear()}</div>
      </div> 
    </div>
  )
}

通用排查思路 #

后续遇到props值为undefined的问题，按以下顺序检查即可快速定位：

• 检查非字符串类型的prop传递时，是否用{}包裹了表达式
• 检查传入的变量本身是否存在值，排查数组索引越界、对象属性不存在、异步数据未返回就渲染的情况
• 检查prop名称拼写是否一致，避免父组件传data子组件读date这类低级错误
• 检查是否存在组件嵌套层级过深，props透传时中间层漏传的问题

内容的提问来源于stack exchange，提问作者Wumi