嵌套Map循环无返回值问题排查及循环合并方案咨询

为啥嵌套循环没渲染内容？ #

兄弟，核心问题出在外层的map没有返回值！你内层的map确实return了Card组件，但外层map只是默默执行了内层循环，根本没把内层循环生成的组件数组return出去，React自然拿不到要渲染的内容。另外还有俩小坑得提一下：

• 用eval获取state非常不安全，而且没必要，直接用对象属性访问global.that.state[days]就可以搞定
• 你的JSX里有语法错误：<Text key={i.start_timestamp}>Starting: {i.start_timestamp</Text>少了闭合的}，最后一个</Text>还缺了>，这些语法问题也会导致渲染失败

先给你修正嵌套循环的代码，让它能正常渲染：

{ daysArray.map(days => {
    // 替换不安全的eval，用对象属性访问
    const dayState = global.that.state[days];
    const dayStateArray = Object.values(dayState);
    // 外层map要return内层map的结果！
    return dayStateArray.map(i => (
        <Card style={{ justifyContent: 'center', alignItems: 'center' }} key={i.id}>
            <Text key={i.name}>{i.name.replace('&amp;', '&')}</Text>
            <Text key={i.start_timestamp}>Starting: {i.start_timestamp}</Text>
            <Text key={i.end_timestamp}>Ending: {i.end_timestamp}</Text>
        </Card>
    ));
}) }

怎么合并这两个循环？ #

用flatMap就可以一步搞定！flatMap会先对数组的每个元素执行映射操作，再把结果扁平化为一维数组，完美替代嵌套的map：

{ daysArray.flatMap(days => {
    const dayState = global.that.state[days];
    return Object.values(dayState).map(i => (
        <Card style={{ justifyContent: 'center', alignItems: 'center' }} key={i.id}>
            <Text key={i.name}>{i.name.replace('&amp;', '&')}</Text>
            <Text key={i.start_timestamp}>Starting: {i.start_timestamp}</Text>
            <Text key={i.end_timestamp}>Ending: {i.end_timestamp}</Text>
        </Card>
    ));
}) }

这样代码更简洁，逻辑也更清晰，而且避免了嵌套循环容易漏return的问题。

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