要优化这段代码以避免 ESLint 的 array-callback-return
错误,你需要确保 map
函数中的每个回调都返回一个值或者通过早期返回来处理。
在你的例子中,你只在满足特定条件时返回元素。
ESLint 的规则要求每个数组迭代都应有返回值,否则它会抛出警告。
一种解决方案是在不满足任何条件时返回 null
或者使用 filter
和 map
结合来确保只有有效的元素被渲染。
下面是一种修改方式:
{FORM_ITEMS.map((item) => {
if (item.type === 'input') {
return (
<Form.Item
key={item.name}
label={item.name}
name={item.name}
rules={item.rules}
>
<Input />
</Form.Item>
);
} else if (item.type === 'checkbox') {
return (
<Form.Item
key={item.name}
name={item.name}
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
);
}
// 如果不满足以上条件,返回 null
return null;
})}
然而,这会在 DOM 中插入不必要的 null
节点。更优雅的方法是使用 Array.prototype.filter
和 Array.prototype.map
来组合:
{FORM_ITEMS
.filter(item => item.type === 'input' || item.type === 'checkbox')
.map((item) => {
if (item.type === 'input') {
return (
<Form.Item
key={item.name}
label={item.name}
name={item.name}
rules={item.rules}
>
<Input />
</Form.Item>
);
} else if (item.type === 'checkbox') {
return (
<Form.Item
key={item.name}
name={item.name}
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
);
}
})}
但是,使用 filter
和 map
可能会导致性能上的微小损失,因为 filter
需要遍历整个数组两次。如果你的数组不大,这种影响可以忽略不计。另外,你也可以直接在 map
函数中使用三元运算符来简化代码:
{FORM_ITEMS.map((item) =>
item.type === 'input' ? (
<Form.Item
key={item.name}
label={item.name}
name={item.name}
rules={item.rules}
>
<Input />
</Form.Item>
) : item.type === 'checkbox' ? (
<Form.Item
key={item.name}
name={item.name}
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
) : null
)}
这样,你既能保持代码的简洁性,也能避免 ESLint 的警告。
标签:返回,map,return,filter,item,type From: https://www.cnblogs.com/longmo666/p/18283797