条件对象作为数组值答案

【问题标题】：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] 或改用[]

标签： javascript reactjs

【解决方案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 你可以使用空数组来代替 [ ]。

谢谢！

【讨论】：