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

Question

我对这个例子的反应和工作都是新手。

我修改了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>
  )
}

这是我的MyComp.js文件，您可以看到下面使用的Example函数JSX：

import React, { useState, useEffect } from "react"
import Example from "./plotBar.js"

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 (
    <ul>
      <Example />
      {list.map(container => (
        <li className="container">
          <ul>
            {container.map(item => (
              <li key={item.id}>
                {item.count} {item.id}
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

export default MyComp

当前将list数组数据映射到一些<li>标记中。

如何映射此list数组数据：

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

请在MyComp函数中...into <Example /> JSX，以便它像本地数据一样显示在图表上？

​

​

Answer 1

我认为像这样的东西应该是有效的：

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>
  );
};