React中函数返回值作为props传递，子组件接收为undefined如何解决？

你给出的示例代码本身逻辑没有问题，正常运行时子组件应该可以拿到minDate对应的日期对象，出现undefined可以按照以下优先级排查修复：

1. 检查tomorrowDate函数的返回逻辑 #

这是最常见的问题原因：你实际业务中的tomorrowDate大概率存在分支判断，部分执行路径没有返回值，或者返回值本身就是undefined。

错误示例： #

const tomorrowDate = () => {
  if (someCondition) {
    return new Date(Date.now() + 86400000)
  }
  // 条件不满足时没有return语句，函数默认返回undefined
}

修正方式： #

确保函数所有执行路径都有有效返回值：

const tomorrowDate = () => {
  const now = new Date()
  // 固定返回明天的日期，不存在无返回的分支
  return new Date(now.setDate(now.getDate() + 1))
}

2. 排查组件导入和拼写问题 #

• 确认导入的Child组件是你定义的目标组件，没有导入同名的其他组件
• 确认父组件传值的prop名和子组件访问的prop名拼写完全一致，大小写敏感

3. 异步日期计算的特殊处理 #

如果你的日期是异步获取的（比如从服务端取服务器时间），需要用state存储计算结果后再传递：

import { useState, useEffect } from 'react'

const Parent = () => {
  const [minDate, setMinDate] = useState()

  useEffect(() => {
    // 模拟异步请求获取日期
    fetch('/api/server-time')
      .then(res => res.json())
      .then(time => {
        const tomorrow = new Date(time)
        tomorrow.setDate(tomorrow.getDate() + 1)
        setMinDate(tomorrow)
      })
  }, [])

  // 日期就绪后再传递给子组件，避免传递undefined
  return (
    minDate ? 
    <Child minDate={minDate} test="test" /> : 
    <div>加载中</div>
  )
}

4. 子组件生命周期兼容 #

componentWillMount已经被React官方标记为废弃生命周期，不建议使用，推荐用constructor或者componentDidMount访问props：

import { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props)
    // 构造函数中即可正常拿到props
    console.log("props are", props)
  }

  render(){
    return <div>最小日期：{this.props.minDate?.toString()}</div>
  }
}

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