在嵌套数组中获取特定 Object 的数据

Question

我有以下嵌套数组：

var productionSteps = [
  0: {
    displayName: "..."
    final: ...
    generateQRCode: ...
    inputs: [
      0: {
        "assetGroup":"ValueAsset", "amount":1000
      },
      1: {...},
      2: {...},
      3: {...},
    ]
    
  },
  1: {...},
  2: {...},
  3: {...}
]

我想访问所有生产步骤的所有资产。 但我想将正确的输入资产保存到组件内的相应生产步骤中。

我正在使用“react-organizational-chart”来可视化这些数据。

我有一个 productionNode 组件，它应该可视化一个生产步骤。 该节点具有相应的资产组件，其中包含适合生产步骤的资产。 我的生产节点如下所示：

var input = props.asset
  return (
      <>
        <Tree
            lineWidth={'2px'}
            lineColor={'green'}
            lineBorderRadius={'10px'}
            label={<div className='asset-container'>
                <div className='top-divider'>
                    <p className='asset-name'>{props.nodeName}</p>
                </div>
            </div>}>
            <TreeNode label={<Asset assetName={input}></Asset>}></TreeNode>
        </Tree>
      </>
  );

资产节点如下所示：

return (
    <>
        <div className='asset-container'>
                <div className='top-divider'>
                    <p className='asset-name'>{props.assetName}</p>
                </div>
            </div>
    </>
);

我尝试通过以下方式进行操作：

<Tree
  lineWidth={'2px'}
  lineColor={'green'}
  lineBorderRadius={'10px'}
  label={<Asset assetName="Output Asset"></Asset>}
>
  {Object.values(productionSteps).map((step: any, index) => {
    step.inputs.map((material: any) => {
      console.log(JSON.stringify(material.assetGroup))
      return (
        <TreeNode key={index} label={<ProductionNode asset={JSON.stringify(material.assetGroup)} nodeName={JSON.stringify(step.displayName)}></ProductionNode>}>
        </TreeNode>
      );
    })
  })}
</Tree>

这不起作用。 此外，我在最后一个代码片段的文本编辑器中收到错误：

"Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'."