JavaScript 无法访问多值返回语句中的变量

Question

由于此渲染语句的第二部分 c 未定义(在返回的逗号之后)，我的应用程序崩溃了。

我不仅要将此元素渲染为 CategoryTreeFork 组件，还要将它的子元素渲染为同一组件。

我在尝试访问该变量时是否犯了错误？

<div className="categories-narabikae">
    <p>Displayed Categories </p>
    {   
        filterActiveCategories(categories).map((c, idx) =>  
            <CategoryTreeFork 
                key={idx}
                parentCat={null}
                thisCat={c}
                level={1}
                dropEvent={this.handleDropEvent}
            />

            ,   

            c.children 
                ? c.children.map( (c2, idx) =>
                <CategoryTreeFork
                    key={idx}
                    parentCat={c}
                    thisCat={c2}
                    level={2}
                    dropEvent={this.handleDropEvent}
                />
            )   
            : null
        )   
    }   
</div>

编辑:在页面的第一次呈现期间，我正在映射的数组看起来是空的(尚未从 API 检索类别)——这可能会触发错误吗？

Answer 1

it looks like during the first render of the page the array that I am mapping is empty (has not yet retrieved categories from API) -- would this possible trigger the error?

您(不小心)使用了逗号运算符:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

因此，解释器将忽略第一个 CategoryTreeFork；实际上只会使用逗号分隔列表中的最后一个值。