Question

组件ProductCategoriesPicker正在接受类别数组categoriesState，目前只是一个空数组[]

这是组件：

import React from 'react'

const ProductCategoriesPicker = ({ categoriesState, onCheck }) =>  (
   <div className="product-categories-picker">
       <h5> MY product categories </h5>
       <ul>
           categoriesState.map( (cat, idx)  =>  
               <li>
                   <label>
                       <input 
                           type="checkbox"
                           checked={cat.checked}
                           onChange={onCheck}
                       />
                       {cat.name}
                   </label>
               </li>
           )   
       </ul>
   </div>

)

export default ProductCategoriesPicker

但无论我如何设置，我都会收到错误消息cat is not defined

首先，不应该映射甚至不在空数组上进入循环？我已经尝试了几种措施来防范这种情况，并且没有一种措施可以阻止错误消息：

categoriesState && cateogoriesState.map ... // same error
categoriesState.length > 0 && categoriesState.map ... // same error

如果我试图在cat上获得一个console.log，那么什么都没有显示（甚至不是undefined，这让我觉得确实没有输入这个循环。

categoriesState.map( (cat, idx) => console.log(cat) &&

这是完整的搞乱卡通 - 为什么应用程序崩溃了这个错误！？

Answer 1

可能它是SO的翻译错误，但看起来你有一些语法错误。我非常确定您需要将categoriesState.map()置于{}内并隐式返回<li> JSX，它需要包含在()中：

<ul>
  {categoriesState.map((cat, idx) => (
    <li>
      <label>
        <input type="checkbox" checked={cat.checked} onChange={onCheck} />
        {cat.name}
      </label>
    </li>
  ))}
</ul>

编辑：正如评论中所指出的，隐式返回

不需要括号

即使没有输入地图循环，也会在array.map上发生React崩溃

1 个答案: