如何修复React中map包裹div后的Type 'void[]'类型错误？

错误Type 'void[]' is not assignable to type 'ReactNode'的核心原因是JavaScript自动分号插入（ASI）：你的return语句后直接换行，JS引擎会自动在return末尾添加分号，等同于return;，导致map函数的每个迭代都返回undefined，最终生成的数组类型是void[]，不符合React对子元素ReactNode的类型要求。

修改方案一：将return与JSX放在同一行 #

let attributes = <>
    <div className="row row-cols-5">
        {
            props.filter.attributes?.map((data) => {
                return <div className="form-check">
                    <input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
                    <label className="form-check-label">{data.name}</label>
                </div>
            })
        }
    </div>
</>

修改方案二：用括号包裹JSX（推荐，可读性更好） #

let attributes = <>
    <div className="row row-cols-5">
        {
            props.filter.attributes?.map((data) => {
                return (
                    <div className="form-check">
                        <input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
                        <label className="form-check-label">{data.name}</label>
                    </div>
                )
            })
        }
    </div>
</>

修改方案三：箭头函数隐式返回（更简洁） #

去掉return，直接用括号包裹JSX，利用箭头函数的隐式返回特性：

let attributes = <>
    <div className="row row-cols-5">
        {
            props.filter.attributes?.map((data) => (
                <div className="form-check">
                    <input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
                    <label className="form-check-label">{data.name}</label>
                </div>
            ))
        }
    </div>
</>

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