Question

我正在努力实现以下目标：
在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)
    ]}
/>

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)

我认为问题应该出在这部分，因为您无法传播未定义的内容，而可以使用空数组代替[]。

谢谢！

条件对象作为数组值

4 个答案: