React中如何正确引用导出的Status结构定义Ticket变量？

我在单独文件中定义并导出了状态数组：

// status.js
export const status = [
    {
        id: 0,
        label: "In progress",
    },
    {
        id: 1,
        label: "Escalated",
    },    
    {
        id: 0,
        label: "Suspended",
    },
]

想要在另一个文件的工单数组中引用它，让每个工单对象的status属性对应status数组里的单个元素，但直接写status: {status[0]}会报语法错误，当前写法status: {status}会把整个数组赋值过去，请问该怎么正确定义？

正确写法 #

你不需要给数组元素额外包裹大括号，直接将数组元素赋值给status属性即可：

// ticket.js
import { status } from "../utils/structures/status"

export const ticket = [
    {
        id: 0,
        status: status[0] // 直接引用数组中的对应元素
    },
    {
        id: 1,
        status: status[1]
    },
    {
        id: 2,
        status: status[2]
    }
]

错误原因解析 #

你之前写的status: {status[0]}属于无效的对象字面量语法：对象大括号内需要是键: 值的键值对结构，或是对象展开语法（如...status[0]），直接放置数组元素会被JS引擎判定为语法错误。

如果你的需求是把status[0]的所有属性展开到工单对象中（而不是作为status属性的值），才需要用展开语法：

// 示例：展开status元素的属性到工单对象
{
    id: 0,
    ...status[0]
}

另外注意：你的status数组中有两个id: 0的元素，这可能会导致后续筛选、匹配时出现混淆，建议将id修正为唯一值。

内容的提问来源于stack exchange，提问作者ihateapachegroovy