reactjs - 警告应在箭头函数的末尾返回一个值

Question

我在控制台上收到此警告。但是，在我看来，代码是正确的：

{
    report.report.map((item, key) => {
        if (item.status !== "pending_review") {
            return (
                <div key={key}>
                    <Spacing appearance="small" />

                    <Title as="h5" >Data: {formatDate(item.createdAt)}</Title>
                    <Title as="h5" >Realizada por: {item?.reported_by?.users[0]?.name}</Title>

                    <Spacing appearance="x-small" />

                    <Title as="h5" >{item?.description}</Title>

                    <Spacing appearance="medium" />
                </div>
            )
        }
    })
}

标签： reactjseslint

Answer 1

您在if-statement 之后缺少默认返回值：

{
    report.report.map((item, key) => {
        if (item.status !== "pending_review") {
            return (
                <div key={key}>
                    <Spacing appearance="small" />

                    <Title as="h5" >Data: {formatDate(item.createdAt)}</Title>
                    <Title as="h5" >Realizada por: {item?.reported_by?.users[0]?.name}</Title>

                    <Spacing appearance="x-small" />

                    <Title as="h5" >{item?.description}</Title>

                    <Spacing appearance="medium" />
                </div>
            )
        }
        return null; // 
    })
}

如果您想缩短它并避免使用if，您可以在映射之前简单地过滤数组：

{
    report.report
      .filter(item => item.status !== "pending_review")
      .map((item, key) => (
         <div key={key}>
           ... content ...
         </div>
      ));
}