好吧，你需要获取数据，用它设置状态，并用一些额外的信息更新组件-至少基于on their documentation。如果你需要操作数据，你可以在把它添加到状态之前完成。

const { useEffect, useState } = React;

// Transforms the data
function mappedData(data) {
  return data.map((el, index) => {
    return { x: el, y: index };
  });
}

function Example() {

  const [ data, setData ] = useState([]);

  // Run `getData` once (the empty dependency array
  // `[]` ensures that). `getData` fetches the JSON,
  // and parses it, and then `setData` adds the (now
  // transformed data to state.
  useEffect(() => {
    async function getData() {
      const response = await fetch(<endpoint>);
      const data = await response.json();
      setData(mappedData(data));
    }
    getData();
  }, []);

  return (
    <VictoryBar
      data={data}
      x="x"
      y="x"
    />
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

个字符

在实现"Vectory Native“图表时，我遇到的一个限制是它只支持键值格式的数据，例如[{key：1，value：12}，{key：2，value：22}，{key：3，value：32}]。然而，在实时应用程序中，数据通常以对象数组的形式到达，例如[{key：[1，2，3]，value：[12，22，32]}]。
为了使其兼容，使用“map”进行数据操作是必要的。不幸的是，对于大型数据集，由于重新构建数据格式所涉及的计算开销，这可能会导致性能问题**。
在这种情况下，探索优化技术或更有效地处理对象数组数据的替代图表库可能是有益的。一些选项可能包括在将数据馈送到图表库之前对数据进行预处理，或者利用专门为在可视化工具中有效处理复杂数据结构而设计的库。