React父组件children为undefined但state打印有值的渲染问题

问题现象 #

• 开发场景：使用useEffect搭配axios在组件挂载时请求接口数据，传入子组件渲染
• 异常表现：页面加载后目标组件未正常渲染，检查父组件props发现children属性为undefined
• 已排查项：接口请求正常，控制台打印返回的state数据符合预期，排除接口报错、state未赋值的问题

根因定位 #

核心错误出在state.map()的回调函数写法上：
你给map传入的回调使用了大括号{}包裹函数体，但没有写return关键字返回要渲染的AccordionItemSlot组件，导致map遍历执行后生成的是全为undefined的数组，最终传递给Accordion、ProcessTable组件的children就是无效的undefined值，组件自然无法正常渲染。

补充：箭头函数语法规则：如果回调函数体用大括号包裹，必须手动写return才能得到返回值；如果需要直接返回JSX，用圆括号包裹函数体即可实现隐式返回，不需要写return。

错误代码片段：

{state.map((element, index) => {
  // 大括号包裹无return，下面的JSX不会被返回
  <AccordionItemSlot
    key={index}
    proccessID={element.id}
    title={element.name}
    targeruser='gutierad5'
    createDate={FormatDateInYYMMDD(element.createdAt)}
    status={element.status}
    creator={element.creator}
    links={element.links}
    amount={element.processBonus.amount}
    updatedAt={element.updatedAt}
    password={element.processBonus.password}
    franchise={element.processBonus.franchise}
  />;
})}

修复方案 #

二选一即可：

1. 隐式返回写法（更简洁，推荐）：将回调的大括号替换为圆括号，去掉JSX末尾多余的分号

{state.map((element, index) => (
  <AccordionItemSlot
    key={index}
    proccessID={element.id}
    title={element.name}
    targeruser='gutierad5'
    createDate={FormatDateInYYMMDD(element.createdAt)}
    status={element.status}
    creator={element.creator}
    links={element.links}
    amount={element.processBonus.amount}
    updatedAt={element.updatedAt}
    password={element.processBonus.password}
    franchise={element.processBonus.franchise}
  />
))}

2. 显式返回写法：保留大括号，在JSX前添加return关键字

{state.map((element, index) => {
  return <AccordionItemSlot
    key={index}
    proccessID={element.id}
    title={element.name}
    targeruser='gutierad5'
    createDate={FormatDateInYYMMDD(element.createdAt)}
    status={element.status}
    creator={element.creator}
    links={element.links}
    amount={element.processBonus.amount}
    updatedAt={element.updatedAt}
    password={element.processBonus.password}
    franchise={element.processBonus.franchise}
  />;
})}

额外优化提示 #

代码中存在几处拼写错误，虽然不是本次渲染异常的直接原因，但后续可能触发props传值不生效的问题，建议同步修正：

• funcionality 正确拼写为 functionality
• targeruser 正确拼写为 targetuser
• proccessID 正确拼写为 processID

另外列表渲染的key不建议直接用index，如果列表数据存在排序、增删操作，用元素唯一ID（比如element.id）作为key更稳妥，避免渲染异常。

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