标签: spread-expression

我使用展开运算符来创建具有更改字段的副本，如以下示例 ( run ) 所示。但是，如果在创建对象文字时更改字段的类型，编译器不会抱怨：

class A{
    constructor(readonly a: number, readonly b: string[]){}
    copy(): A { // must return an object of type A
        return {
            ...this,
            b: 99 // should be of type string[]!
        }
    }
}

const a: A = new A(1, ["x", "y"])
const a1 = a.copy()
console.log(JSON.stringify(a1))

输出：

[LOG]: "{"a":1,"b":99}"

创建显式接口也没有帮助：

interface IA {
    readonly a: number
    readonly b: string[]
}

...

copy(): IA { ...

看起来它与数组无关，因为下一个示例也可以编译：

class A{
    constructor(readonly a: number, readonly b: number){}
    copy(): …

我的组件有一个应该存储对象数组的状态。我把它初始化为空。

    const [tableDataSource, setTableDataSource] = useState([])

在成功获取并重新组织获取结果几次后，应将一个或多个对象文字附加到tableDataSource状态。期望的输出应该是

[
    {
        key: 1,
        key2: 'sample string value',
        key3: false,
    },
    {
        key: 'sample string value',
        key2: true,
    }
]

我当前的获取结果是另一个包含2 个对象文字的数组。我尝试将此数组中的所有项目附加到状态设置器中。

    let dataSource = generateRows(showCompletedItems, fetchResult);

上面的代码将获取结果重新组织为所需的输出。我在控制台中记录了dataSource并验证了它是否是一个 Array 对象并且它返回了true。

在组件声明中的某个位置，我还有一个useEffect来记录当前的tableDataSource以输出更改。

    console.log('TABLE DATA SOURCE >>>>', tableDataSource, typeof tableDataSource);

我很难使用其设置器将数组项附加到状态数组中。我尝试了方法#1：

    setTableDataSource(dataSource);

控制台不记录任何内容。

方法#2：

    setTableDataSource((tableDataSource) => [...tableDataSource, dataSource])

返回一个嵌套数组，如下所示：

    [[{...},{...}]]

如果我使用方法 2 并像这样初始化组件状态：

    const [tableDataSource, setTableDataSource] = useState([{}])

结果：

    [{}, [{...}, {...}]] …