如何提取深度嵌套的对象数组并移动到 React Hook state？

Question

我总共有一个包含 49 个对象的数组。 在每个嵌套的 object 中，还有另一个嵌套的“ children ”数组。 在这个数组里面，有一个值“ text ”。

我正在尝试 map 并仅过滤掉这些值，以连接/组合文本并将它们移动到我的 React Hook。 这样我就只剩下文字了，所以我可以根据文字内容的数量来计算阅读时间。

我的钩子：

const [textSize, setTextSize] = useState();

49 个对象中的 4 个示例：

0: {_key: 'ade9a24f5cb6', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
1: {_key: '5aa8a2fa2969', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
2: {_key: '602703f9c2b7', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
3: {_key: '211597e8045a', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}

在“children”数组之一中：

0: {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: 'Lorem ipsum dolor sit amet'}

从那个数组中，如果有意义的话，我需要每个 object 的文本？

Array 有 49 个对象 => 每个 object 都有嵌套 Array (children) => 每个子数组都有值“text”。

Answer 1

这样的事情怎么样？ 如果我正确理解你的问题..

 let array = [ {_key: 'ade9a24f5cb6', _type: 'block', caption: null, children: [ {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '1 Lorem ipsum dolor sit amet'}, {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '2 Lorem ipsum dolor sit amet'} ], markDefs: Array(0) }, {_key: '5aa8a2fa2969', _type: 'block', caption: null, children: [ {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '3 Lorem ipsum dolor sit amet'} ], markDefs: Array(0) }, {_key: '602703f9c2b7', _type: 'block', caption: null, children: [ {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '4 Lorem ipsum dolor sit amet'}, {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '5 Lorem ipsum dolor sit amet'}, {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '6 Lorem ipsum dolor sit amet'}, ], markDefs: Array(0) }, {_key: '211597e8045a', _type: 'block', caption: null, children: [], markDefs: Array(0) } ] let results = array.map(x => x.children).flat().map(y => y.text); console.log(results);