javascript - React 不要在循环内创建函数 no-loop-func

Question

我的代码运行良好，但有一个警告，我想消除“不要在循环 no-loop-func Reactjs 中创建函数”

这是我的代码

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()) {
   //...
 }