Javascript 带有React的Highcharts-类别显示为数字而不是文本

我正在我的Laravel项目中实现highcharts react bundle（），我需要能够从我的reducer中检索数据，并将其插入字符串中，以放入图表配置中的类别中

但是，即使数据看起来正确呈现（根据控制台日志记录），图表类别也只是以0到4的数字呈现

这是我的代码：

componentDidMount() {
    this.props.refreshServiceProviders(); // this pulls in the data
}

const { providers } = this.props;
const spArray = [];

// build up the array of Service Providers
{ providers.map(function (provider) {
    spArray[provider.id] = provider.name;
}, this)}

// remove empty values
const newArray = spArray.filter(function(x){
    return (x !== (undefined || null || ''));
});

// join the values by comma, encased in quotes
const spList = "['" + newArray.join("','") + "']";

然后在X轴下的Highchart配置中，我传递

spList

常量：

xAxis: {
    categories: { spList }

当我注销spList时，我得到以下信息：

'Provider 1', 'Provider 2', 'Provider 3', 'Provider 4', 'Provider 5'

当直接在配置中的categories选项中传递时，它可以完美地工作——但由于某些原因，当通过常量传递时，它不起作用

这里有什么我错过的吗？我不知道该怎么办。

---

}，

尝试执行

类别：spList

而不是

类别：{spList}

。也就是说，删除表示对象而不是数组的

{}

您将

类别

对象设置错误

执行

categories:{spList}

时，JavaScript实际做的是创建以下对象：

categories: {
    spList: '[...]'
}

另外，您不需要在

spList

中加入字符串，因为

newArray

已经是一个数组

---

所以基本上你需要做的是设置你的

类别

比如

类别：newArray

实际上我认为最初的问题是它没有被分割成一个字符串-我是一个很新的反应，所以我不确定我需要使用的格式，但我现在明白了，谢谢！