在map中使用react-bootstrap Alert不工作

Question

我试图在react-boostrap中使用一个map来使用Alert组件，就像本指南中所做的那样。我想把这个列表作为一个组件，这样我就可以在几个地方使用它。为此，我创建了如下所示的接口:

import { ReactElement } from "react";
import { Variant } from "react-bootstrap/types";
export interface AlertItem {
content: string | ReactElement;
index: number;
variant?: Variant
header?: string;
}

在我希望能够将警报显示为列表的组件中，我(动态地)创建了一个AlertItem[]数组和一个函数，该函数在索引" I "处删除AlertItem。然后我尝试使用<AlertList alerts={alerts} closeAlertCallback={closeAlert} />显示警报列表。

所以我的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>
</>
);

注意，这是文件中唯一的变化。传入的alerts数组和closeAlertCallback完全相同。我甚至可以通过单击X来删除数组中的第一个警报，然后呈现下一个警报。

我完全不知道我做错了什么。我可能错过了一些明显的东西，或者只是有点盲目，没有看到错误。

别人能指出我的错误吗?

Answer 1

我想你错过了地图函数中的'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>
})}
</>
);