arrays - react .js : How to properly append multiple items to an array state using its use-state hook setter?

Question

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

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

在成功获取和重组获取结果之后，一个或多个 对象字面值应该附加到tableDataSource 状态。期望的输出应该是

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

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

    let dataSource = generateRows(showCompletedItems, fetchResult);

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

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

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

我很难使用其 setter 将数组项附加到状态数组中。我尝试了方法 # 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]))

我希望这个非常具体的问题能对其他人有所帮助。这很烦人，我花了好几个小时才弄明白。