如何将变量数据传入BankingWidgetSummary的chart属性？

错误原因 #

• 组件的chart属性要求传入包含series字段的对象（参考示例中的chart={{ series: [数组] }}），但你直接传入了原始的对象数组_bankingMovements，格式完全不匹配
• 未筛选出目标类型（Deposit）的series数据，直接传递所有类型的记录不符合业务需求

正确实现步骤 #

1. 从_bankingMovements中筛选出type为Deposit的条目，提取它们的series值组成数组
2. 将该数组放入符合组件要求的chart对象结构中

方式一：提前处理数据 #

// 提前筛选并提取Deposit对应的series数据
const depositSeries = _bankingMovements
  .filter(item => item.type === "Deposit")
  .map(item => item.series);

<BankingWidgetSummary
    title="Deposits"
    percent={2.6}
    total={765}
    chart={{
        series: depositSeries
    }}
/>

方式二：内联处理数据 #

如果不需要复用处理后的数据，可以直接在组件属性中内联处理：

<BankingWidgetSummary
    title="Deposits"
    percent={2.6}
    total={765}
    chart={{
        series: _bankingMovements
            .filter(item => item.type === "Deposit")
            .map(item => item.series)
    }}
/>

内容的提问来源于stack exchange，提问作者Javi Amat