react 不要在循环中制作函数 no-loop-func

Question

我的代码运行良好，但有一条警告，我想消除"不要在循环中生成函数">

这是我的代码

renderOptions(categoryOptions) {
const renderData = []
let iterator = 0
// const subCategory = this.state.listSubcategorySelected
const { listSubcategory: subCategory = [], listCategory = [] } = this.props.showFilterRightText
for (const category in categoryOptions) {
const liData = []
renderData.push(
<ul key={`ul.${iterator}`} className="filter-box__collection has-title">
<li
key={`lii.${iterator}`}
className="filter-box__collection__title"
value={iterator}
onClick={this.showListOption(iterator)}
>
<span>{category}</span>
<i className="material-icons right-align font-size__18px">
{this.state.listOption[iterator] ? 'add' : 'remove'}
</i>
</li>
</ul>
)
const indexCategory = listCategory.indexOf(category)
categoryOptions[category].forEach((item, index) => {
let isCkecked = false
if (indexCategory >= 0) {
isCkecked = subCategory[indexCategory] && subCategory[indexCategory].indexOf(item) !== -1
}
liData.push(
<li key={`li${iterator}${index}`} className="filter-box__collection__item">
<input
id={item}
type="checkbox"
className="filled-in radio__is-for-filter"
checked={isCkecked !== undefined ? isCkecked : false}
onChange={this.handleChangeChk(category, item)}
/>
<label htmlFor={item}>{item}</label>
</li>
)
})
renderData.push(
<ul
key={`ull${iterator}`}
className="filter-box__collection"
style={{ display: this.state.listOption[iterator] ? 'none' : 'block' }}
>
{liData}
</ul>
)
iterator += 1
}
return renderData

}

控制台告诉我问题出在我发布的代码的第24行

const indexCategory = listCategory.indexOf(category)
categoryOptions[category].forEach((item, index) => {

任何能帮到我的提示都会让大吃一惊

Answer 1

循环是for..of循环，react抱怨的函数是传递给forEach的函数，即(item, index) =>箭头函数。这可能比常规的for循环慢一点，因为JS引擎必须在每次外部迭代时创建一个新的函数上下文，但它只会慢一点以便您可以安全地忽略警告。或者你使用一个正则的for循环：

for(const [item, index] of categoryOptions[category].entries()) {
//...
}