条件对象作为数组值

Posted 2023-02-22

【中文标题】条件对象作为数组值

【英文标题】：conditional object as array value

【发布时间】：2019-06-28 05:21:37

【问题描述】：

我正在努力实现以下目标： 在 React 中，我有一个组件，其中 prop 接受一个包含对象的数组，然后该组件在下拉菜单项中显示这些对象。 我想有条件地制作一些这些下拉菜单项。换句话说：一些用户可能会看到一个下拉项目，而其他用户则不会。

实现这一目标的正确方法是什么？我尝试使用扩展运算符（根据这个Answer，但我一直收到错误

TypeError: Invalid attempt to spread non-iterable instance

我做错了什么？

我的代码：

<Dropdown
    type="link"
    itemsObject=
       [...states.all.map(state => (
           value: state.name,
           onClick: () => 
               this.updateCandidate(candidate, state_id: state.id)
           
        )),
        
            isDivider: true
        ,
        
            value: "Notities bewerken",
            onClick: () => 
                this.openCandidateModel(candidate)
            
        ,
        ...(candidate.state.id === 2 ? [
                value: "Afspraak beheren",
                onClick: () => 
                    this.openCandidateModel(candidate)
                
           ] : undefined)
    ]
/>

【问题讨论】：

好吧，我猜如果您的三元运算符导致undefined 它无法传播。尝试将 undefined 括在括号中：[undefined] 或改用[]

【参考方案1】：

当candidate.state.id !== 2 时，您正试图传播undefined。将其更改为：

...(candidate.state.id === 2 ? [
                value: "Afspraak beheren",
                onClick: () => 
                    this.openCandidateModel(candidate)
                
           ] : [])

另外，可能值得一提的是...undefined 有效但[...undefined] 无效：Spreading undefined in array vs object

【参考方案2】：

你不能传播undefined，但是你可以传播一个空数组：

 [...undefined] // doesnt work
 [...[]] // works

【参考方案3】：

您正在尝试传播导致错误的未定义。采用 ？ [] : []

【参考方案4】：

   ...(candidate.state.id === 2 ? [
            value: "Afspraak beheren",
            onClick: () => 
                this.openCandidateModel(candidate)
            
       ] : undefined)

我认为问题应该出在这部分，因为你不能传播 undefined 你可以使用空数组来代替 [ ]。

谢谢！