使用表情符号作为 Highcharts WordCloud 的输入时出错

Question

在使用表情符号作为输入数据时，我在使用 Highcharts WordCloud 和 React 时遇到了问题。我正在使用 highcharts-react-official 包装器。我得到的错误是

TypeError: Cannot convert undefined or null to object

在 wordcloud 的渲染过程中。

我已经尝试过输入数据集以确保它们非空且非未定义，并且还使用表情符号数组本身来测试特定表情符号是否导致了问题。该测试的结果突出显示了几个表情符号，这些表情符号起初引起了问题，但随后它们奇迹般地再次开始正常运行。但是，有时使用与之前测试不同大小的浏览器窗口会重现错误。

通过深入研究 Highcharts WordCloud src 代码，我想我已经将问题缩小到尝试迭代要呈现的表情符号的

animatableAttribs

对象的键，当发生错误。所以我想也许错误在于该特定表情符号的动画尝试，这也许可以解释重现错误的困难，因为表情符号的动画、方向或定位可能在渲染或窗口调整大小时略有不同。为了测试这一点，我将系列的动画属性设置为 false，但错误仍然发生。

任何人都可以告诉我我在这里做错了什么，或者 Highcharts wordcloud 不完全支持表情符号吗？

我在here重新创建了一个codesandbox示例。如果您通过单击按钮循环浏览表情符号数组列表，错误似乎最终会发生。下面也是我的浏览器中控制台错误的堆栈跟踪，并在第 99 行引用了 wordcloud src，也在下面。

WordCloud.jsx

import React, { useEffect, useState } from "react";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import addWordcloudModule from "highcharts/modules/wordcloud";

addWordcloudModule(Highcharts);

const WordCloud = ({ data }) => {
  const [chartOptions, setChartOptions] = useState({
    title: {
      text: ""
    },
    series: [
      {
        type: "wordcloud",
        data: [],
        name: "frequency"
      }
    ],
    tooltip: {
      headerFormat:
        '<span style="font-size: 16px"><b>{point.key}</b></span><br>'
    },
    plotOptions: {
      series: {
        minFontSize: 2,
        animation: false
      }
    }
  });

  const updateSeries = (data) => {
    const newSeries = [
      { type: "wordcloud", data: data.data, name: data.name ?? "frequency" }
    ];
    console.log(newSeries);
    setChartOptions({
      ...chartOptions,
      series: newSeries
    });
  };

  useEffect(() => {
    console.log(data);
    if (data) {
      updateSeries(data);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default WordCloud;

App.jsx

import { useState } from "react";
import "./styles.css";
import WordCloud from "./WordCloud";

const emojis = [
  {
    data: [
      {
        name: "😘",
        weight: 176
      },
      {
        name: "🏃🏻‍♀️",
        weight: 1
      },
      {
        name: "🤟",
        weight: 1
      },
      {
        name: "🤙",
        weight: 1
      },
      {
        name: "😣",
        weight: 1
      },
      {
        name: "🚁",
        weight: 1
      },
      {
        name: "😬",
        weight: 1
      },
      {
        name: "🧡",
        weight: 1
      }
    ]
  }
];

export default function App() {
  const [index, setIndex] = useState(0);

  const updateData = () => {
    const newIndex = (index + 1) % emojis.length;
    console.log(newIndex);
    setIndex(newIndex);
  };

  return (
    <div className="App">
      <button onClick={updateData}>Update Data</button>
      <h5>index = {index}</h5>
      <WordCloud data={emojis[index]} />
    </div>
  );
}