react-bootstrap中map渲染Alert组件失效问题求助

问题场景 #

封装复用的AlertList组件通过map遍历AlertItem数组渲染React-Bootstrap的Alert组件时，完全无法显示任何Alert；但直接渲染数组第一个元素时，组件正常显示且关闭功能正常。

相关代码如下：

AlertItem接口定义 #

import { ReactElement } from "react";
import { Variant } from "react-bootstrap/types";

export interface AlertItem {
    content: string | ReactElement;
    index: number;
    variant?: Variant
    header?: string;
}

原AlertList组件（无法渲染） #

import { ReactElement } from "react";
import { Alert } from "react-bootstrap";
import { AlertItem } from "../interfaces/AlertItem";

interface Props {
    alerts: AlertItem[];
    closeAlertCallback: (index: number) => void;
}

const AlertList = ({alerts, closeAlertCallback}: Props): ReactElement => {
    if (alerts.length === 0) {
        return <>></>;
    }

    return (
        <>
            {alerts.map((alert, i) => {
                <Alert key={`alert-${i}`} variant={alert.variant} onClose={() => closeAlertCallback(i)} dismissible>
                    {alert.header && <Alert.Heading>{alert.header}</Alert.Heading>}
                    {alert.content}
                </Alert>
            })}
        </>
    );
};

export default AlertList;

可正常渲染的代码片段 #

return (
    <>
        <Alert variant={alerts[0].variant} onClose={() => closeAlertCallback(0)} dismissible>
            {alerts[0].header && <Alert.Heading>{alerts[0].header}</Alert.Heading>}
            {alerts[0].content}
        </Alert>
    </>
);

问题原因 #

map遍历的回调函数没有返回任何内容：原代码中使用了大括号包裹回调逻辑，但未显式添加return语句，导致map生成的数组全为undefined，React无法渲染任何组件。

修复方案 #

有两种方式解决这个问题：

方式1：使用小括号实现隐式返回 #

将回调的大括号替换为小括号，React会自动返回括号内的JSX元素：

const AlertList = ({alerts, closeAlertCallback}: Props): ReactElement => {
    if (alerts.length === 0) {
        return <>></>;
    }

    return (
        <>
            {alerts.map((alert, i) => (
                <Alert key={`alert-${i}`} variant={alert.variant} onClose={() => closeAlertCallback(i)} dismissible>
                    {alert.header && <Alert.Heading>{alert.header}</Alert.Heading>}
                    {alert.content}
                </Alert>
            ))}
        </>
    );
};

方式2：添加显式return语句 #

在回调的大括号内明确返回Alert组件：

const AlertList = ({alerts, closeAlertCallback}: Props): ReactElement => {
    if (alerts.length === 0) {
        return <>></>;
    }

    return (
        <>
            {alerts.map((alert, i) => {
                return <Alert key={`alert-${i}`} variant={alert.variant} onClose={() => closeAlertCallback(i)} dismissible>
                    {alert.header && <Alert.Heading>{alert.header}</Alert.Heading>}
                    {alert.content}
                </Alert>;
            })}
        </>
    );
};

额外建议 #

由于AlertItem本身已包含index字段，建议直接使用alert.index作为组件的key值，比遍历的下标i更稳定（避免数组元素顺序变化时，key值跟随变化引发的不必要重渲染）。

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