有条件的对象作为数组值

Question

我想实现以下目标： 在反应，我有其中一个支柱采取与对象阵列，此后该组件在一个下拉菜单项显示这些对象的成分。 我想提出一些thesedropdown菜单项的条件。换句话说，一些用户可能会看到一个下拉菜单项，其中另一些则不会。

什么是实现这一目标的正确方法是什么？我尝试使用传播运营商（根据本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)
    ]}
/>

Answer 1

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

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

此外，它可能是值得一提的{...undefined}是有效的，但[...undefined]是不是：Spreading undefined in array vs object

Answer 2

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

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

Answer 3

您正在试图传播不确定，导致该错误。采用 ？ [{}]：[]

Answer 4

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

我认为这个问题应该在这个部分，你不能传播不确定的，你可以使用空数组，而不是[]。

谢谢！