即使未输入映射循环，React也会在array.map上崩溃

Question

The component ProductCategoriesPicker is accepting an array of categories as categoriesState , which is currently just an empty array []

Here's the component:

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

But no matter how I set it up, I get a crash with error message cat is not defined

First of all, shouldn't map not even enter the loop on an empty array? I've tried several measures to guard against this regardless, and none of them stop the error message:

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

And if I try to get a console.log on the cat, nothing at all shows up (not even undefined , which makes me think that indeed, this loop is not being entered.

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

This is complete looney toons -- why does the app crash on this error!?

Answer 1

Maybe it's a translation error to SO, but it looks like you have some syntax errors. I'm fairly sure you need to have your categoriesState.map() inside {} and also to implicitly return the <li> JSX, it needs to be wrapped in () :

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

EDIT: As pointed out in comments, the parentheses are not required for implicit return