React.js：如何使用其使用状态挂钩设置器将多个项目正确附加到数组状态？

Question

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

    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([{}])

结果：

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

方法 #3 不会记录与第一种类似的任何内容

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

Answer 1

弄清楚了。

setArrayOfObjects((currentObjects) => currentObjects.concat([ ...anotherArrayOfObjects]))

我希望这个非常具体的问题能够帮助其他人。这非常烦人，我花了几个小时才弄清楚。