React项目中render内map调用的自定义组件未执行且无控制台报错

架构老林

2026-10-24

问题根因定位

核心异常出在父组件render方法内的数组map回调逻辑漏写了返回语句，和你做的日志排查结果完全匹配：

父组件render本身是正常执行的，所以开头打印的console.log("redering component")可以正常输出
map遍历过程因为没有正确返回生成的JSX元素，最终render方法返回的是一个全为undefined的数组，React根本不会识别这些无效值为需要渲染的自定义组件，自然不会触发TaskClumnDays组件内部的执行逻辑，你加在组件里的日志也就不会打印
因为整个逻辑没有语法错误、也没有运行时的非法操作，所以控制台不会抛出任何报错

错误代码的具体问题

你当前map的回调写法是：

this.state.dates.map((date) => {
  <TaskClumnDays key={date} title={date} object={this.state.tasks[date]} />;
});

箭头函数用{}包裹函数体时，必须手动写return才能把内部内容返回出去。现在的写法只是在函数体里放了一段没有被使用的JSX表达式，函数执行完默认返回undefined，相当于React拿到了一个全是空值的渲染列表，自然不会执行任何自定义组件的逻辑。

修复方案

两种等价的正确写法，选其中一种就行：

把箭头函数的花括号换成圆括号，实现JSX的隐式返回

render() {
  console.log("redering component");
  return this.state.dates.map((date) => (
    <TaskClumnDays key={date} title={date} object={this.state.tasks[date]} />
  ));
}

保留花括号的函数体结构，手动补充return语句

render() {
  console.log("redering component");
  return this.state.dates.map((date) => {
    return <TaskClumnDays key={date} title={date} object={this.state.tasks[date]} />;
  });
}