SwiftUI中AppPear ChartView柱状图接入API数据重复渲染问题求解

核心问题说明 #

你当前的写法逻辑错误：ForEach 作用是遍历数组生成多个独立视图，你给每一条数据都单独生成了一个 BarChartView 组件，自然会渲染出多个小柱状图，并非 ForEach 或ID配置的问题。

解决方案 #

不需要用 ForEach 处理视图层渲染，提前将接口返回的数组转换为图表组件要求的 (String, Double) 格式数据源，直接传入单个 BarChartView 即可。

步骤1：预处理接口数据 #

首先将 vm.res 映射为图表需要的结构，你可以通过计算属性实现：

// 图表数据源，可直接作为参数传入ChartData
var chartDataSource: [(String, Double)] {
    vm.res.map { resul in
        // 这里的第一个返回值是X轴显示的标签，可根据你的业务字段替换，比如用返回的月份字段、日期字段
        // 如果没有对应标签字段，也可以用序号生成
        return (resul.dateStr, resul.new_cases)
    }
}

如果没有专门的标签字段，用序号生成标签的写法：

var chartDataSource: [(String, Double)] {
    vm.res.enumerated().map { index, resul in
        return ("\(index+1)", resul.new_cases)
    }
}

步骤2：渲染单个图表 #

视图层直接调用单个 BarChartView 传入预处理好的数据源即可：

BarChartView(data: ChartData(values: chartDataSource), title: "")

注意事项 #

• 所有数据格式转换逻辑都放在数据层/计算属性中处理，不要放在视图渲染逻辑里，避免重复渲染问题
• 如果X轴标签需要自定义格式（比如显示月份、日期），直接在数据映射的步骤中调整第一个返回值即可

内容的提问来源于stack exchange，提问作者Nursultan Yelemessov