如何将自定义标签数组传入Chart.js饼图组件的labels配置项？

你不用额外遍历arr，labels配置本身就支持直接传入数组，直接把arr变量赋值给labels字段即可。

另外你之前生成arr的代码可以简化，不需要单独声明空数组再push，直接用map返回新数组更简洁：

// 优化后的arr生成代码
const arr = items ? items.map(index => index.itemName) : []

控制台打印结果和你之前的写法完全一致：

["Item1", "Item2", "Item3", "Item4"]

修改后的Pie组件代码如下：

<Pie
  data={{
    labels: arr, // 直接赋值arr即可，不需要额外遍历
    datasets: [
      {
        label: "1st Dose",
        // 注意：当前data有5个值，arr只有4个元素，建议调整成数量一致避免图表渲染异常
        data: [10, 20, 30, 50, 30],
        backgroundColor: ["red", "orange", "yellow", "Green", "Blue"],
        borderColor: ["rgba(255, 99, 132, 1)"],
        borderWidth: 1,
      },
    ],
  }}
  height={400}
  width={600}
  options={{
    maintainAspectRatio: false,
    title: {
      display: true,
      text: "Hello",
      fontSize: 20,
    },
    legend: {
      labels: {
        fontSize: 25,
      },
    },
  }}
/>

如果确实需要对arr的元素做二次处理再填入，可以直接在赋值的时候做遍历处理，比如给每个项加前缀的写法：

labels: arr.map(item => `前缀-${item}`)

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