React Hooks场景下传递给子组件的Props为undefined问题求助

问题根因 #

你遇到的问题和函数返回不及时没有关系，核心原因是showSelectedDay函数没有显式返回值，导致传给子组件ScheduledTrainingCard的dayTraining属性永远是undefined。具体问题点如下：

• forEach本身没有返回值，你在循环内部写的trainings.map也只是做了遍历操作，没有把结果返回给外层函数
• 整个showSelectedDay函数结束时没有return语句，默认返回值就是undefined，子组件自然拿不到对应的课程数据

修正方案 #

直接修改showSelectedDay函数，用Array.find匹配对应id的日期，返回对应的课程数组即可：

function showSelectedDay(arr, dayId) {
  const targetDay = arr.find(element => dayId === element.id);
  if (targetDay) {
    console.log("selected day is " + targetDay.date);
    return targetDay.dayTrainings;
  }
  console.log("not selected, day id is " + dayId);
  return [];
}

可选简化方案 #

你也可以不用单独封装工具函数，直接在传属性时匹配目标数据，代码更简洁：

{activeItem && (
  <ScheduledTrainingCard
    dayTraining={days.find(item => item.id === activeItem)?.dayTrainings || []}
  ></ScheduledTrainingCard>
)}

修改后即可正常把选中日期对应的课程数组传给子组件渲染。

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