Javascript 如何在React Vis示例中使用远程数据

我对这个例子的反应和工作非常陌生

我已经修改了react-vis中的一个示例图表，并将其用于我的本地数据：

这是我的

plotBar.js

文件：

import React from "react"

import {
  XYPlot,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  VerticalBarSeries,
} from "react-vis"

const data = [
  { id: "ransomware", count: 413 },
  { id: "phishing", count: 368 },
  { id: "apt", count: 303 },
  { id: "trojans", count: 183 },
  { id: "viruses", count: 137 },
  { id: "backdoors", count: 101 },
  { id: "dos", count: 100 },
  { id: "social engineering", count: 75 },
  { id: "insider threat", count: 71 },
  { id: "payloads", count: 66 },
]

const dataUpdated = data.map(s => ({
  x: s.id,
  y: s.count,
}))

export default function Example(props) {
  return (
    <XYPlot margin={{ bottom: 70 }} xType="ordinal" width={300} height={300}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis tickLabelAngle={-45} />
      <YAxis />
      <VerticalBarSeries data={dataUpdated} />
    </XYPlot>
  )
}

列表

数组数据当前映射到一些

标记中

如何映射此

列表

阵列数据：

{list.map(container => (
        <li className="container">
          <ul>
            {container.map(item => (
              <li key={item.id}>
                {item.count} {item.id}

{list.map（容器=>(


{container.map（项=>(

{item.count}{item.id}

…进入MyComp函数中的

JSX，因此它会像我的本地数据一样显示在图表上吗

---

我认为这样做应该有效：

export default function Example({ data }) {
  return (
    <XYPlot
      margin={{ bottom: 70 }}
      xType="ordinal"
      width={300}
      height={300}
    >
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis tickLabelAngle={-45} />
      <YAxis />
      <VerticalBarSeries data={data} />
    </XYPlot>
  );
}

function getJson() {
  return fetch('http://secstat.info/testthechartdata3.json')
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

const MyComp = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getJson().then(list => setList(list));
  }, []);

  return (
    <div>
      {list.map((data, index) => (
        <Example
          key={index}
          data={data.map(({ id, count }) => ({
            x: id,
            y: count,
          }))}
        />
      ))}
    </div>
  );
};

导出默认函数示例（{data}）{
返回(
);
}
函数getJson（）{
返回获取（'http://secstat.info/testthechartdata3.json')
.then（response=>response.json（））
.catch（错误=>{
控制台错误（error）；
});
}
常量mycop=（）=>{
const[list，setList]=useState（[]）；
useffect（（）=>{
getJson（）.then（list=>setList（list））；
}, []);
返回(
{list.map（（数据，索引）=>(
({
x:id，
y:伯爵，
}))}
/>
))}
);
};

谢谢，太好了！你能帮我理解为什么你替换了

道具

，并在函数中添加了

{data}

，用大括号括起来吗？@ade1e我将数据作为道具传递，所以示例将

{data:valueOfData}

作为道具，但只关心

数据

，所以我将数据从道具中取出。

export default function Example({ data }) {
  return (
    <XYPlot
      margin={{ bottom: 70 }}
      xType="ordinal"
      width={300}
      height={300}
    >
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis tickLabelAngle={-45} />
      <YAxis />
      <VerticalBarSeries data={data} />
    </XYPlot>
  );
}

function getJson() {
  return fetch('http://secstat.info/testthechartdata3.json')
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

const MyComp = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getJson().then(list => setList(list));
  }, []);

  return (
    <div>
      {list.map((data, index) => (
        <Example
          key={index}
          data={data.map(({ id, count }) => ({
            x: id,
            y: count,
          }))}
        />
      ))}
    </div>
  );
};