当我使用表情符号作为输入数据时，我在使用Highcharts WordCloud with React时遇到了一个问题。我使用的是highcharts-react-official Package 器。大多数时候表情符号显示正常，但偶尔我会在渲染过程中得到TypeError: Cannot convert undefined or null to object。
我尝试了输入数据集，以确保它们是非空的，非未定义的，还尝试了表情符号本身的数组，以测试是否是特定的表情符号导致了问题。测试结果突出显示了一些表情符号，最初导致了问题，但后来又开始正常工作。有时，调整浏览器窗口大小或调整权重，或者删除一个输入值也会重新产生错误，但是我不能将它归结为任何特定的输入值。
通过对Highcharts WordCloud源代码的深入研究，我认为我已经将问题缩小到了试图迭代要渲染的emoji的animatableAttribs对象的键，当错误发生时，结果是null或未定义。因此，我认为错误可能是在尝试动画化该特定emoji时，这可能解释了在将错误再现为动画时的困难。表情符号的方向或位置在渲染或窗口大小调整时可能会稍有不同。2为了测试这一点，我将该系列的动画属性设置为false，但错误仍然发生。
有人能告诉我，如果我在这里做错了什么，或者如果表情符号只是不完全支持 highcharts 的文字云？

编辑似乎向表情符号添加文本，使输入变为结尾带有表情符号的一小行文本，可以防止错误发生。所需的前置文本的最小长度似乎为2个字符。因此，使用“to😃“代替“😃“可以可靠地工作。空字符串或仅白色的字符串，以及结尾附加的表情符号不起作用。

我重新创建了一个codesandbox的例子here，如果你点击按钮循环浏览emoji数组列表，错误最终会发生，下面也是我的浏览器中控制台错误的堆栈跟踪，引用了第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>
  );
}

console log of error
wordcloud.src