与来自 api rest 的数据反应时渲染图形出错
Error rendering graphics in react with data coming from api rest
我正在尝试使用来自 api 休息的数据渲染图表,但它没有显示值。我试图检查 chartjs 文档,但找不到错误。有谁能够帮我?我正在使用反应、图表和 axios。
import React, { useState } from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";
export default function ChartBar() {
const [dados, setDados] = useState({});
async function consultApi() {
let res = await axios.get(
"https://private-afe609-testefront.apiary-mock.com/anual-result"
);
Object.values(res.data).map(item => setDados(item));
}
console.log(dados);
consultApi();
return (
<div>
<Bar labels={[dados.label]} data={[dados.value]} />
</div>
);
}
我认为你在这里遗漏了很多东西
检查图表 js 2 如何检索数据道具以及您如何处理 API 响应。
这行得通
在此处检查 sandbox
import React, { useState } from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";
export default function App() {
const [label, setLabel] = useState([]);
const [data, setData] = useState([]);
React.useEffect(() => {
axios
.get("https://private-afe609-testefront.apiary-mock.com/anual-result")
.then(result => {
setLabel(Object.keys(result.data).map(key => result.data[key].label));
setData(Object.keys(result.data).map(key => result.data[key].value));
console.log(data);
});
}, []);
return (
<div>
<Bar data={{
labels: label,
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: data
}
]
}} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
我正在尝试使用来自 api 休息的数据渲染图表,但它没有显示值。我试图检查 chartjs 文档,但找不到错误。有谁能够帮我?我正在使用反应、图表和 axios。
import React, { useState } from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";
export default function ChartBar() {
const [dados, setDados] = useState({});
async function consultApi() {
let res = await axios.get(
"https://private-afe609-testefront.apiary-mock.com/anual-result"
);
Object.values(res.data).map(item => setDados(item));
}
console.log(dados);
consultApi();
return (
<div>
<Bar labels={[dados.label]} data={[dados.value]} />
</div>
);
}
我认为你在这里遗漏了很多东西
检查图表 js 2 如何检索数据道具以及您如何处理 API 响应。
这行得通
在此处检查 sandbox
import React, { useState } from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";
export default function App() {
const [label, setLabel] = useState([]);
const [data, setData] = useState([]);
React.useEffect(() => {
axios
.get("https://private-afe609-testefront.apiary-mock.com/anual-result")
.then(result => {
setLabel(Object.keys(result.data).map(key => result.data[key].label));
setData(Object.keys(result.data).map(key => result.data[key].value));
console.log(data);
});
}, []);
return (
<div>
<Bar data={{
labels: label,
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: data
}
]
}} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);