图表 Js 未显示动态传递的数据值

Question

我正在尝试使用 react 和 chart js 创建一个电晕病毒跟踪器。 我从 API 中获取了确认、恢复和死亡的数量，并使用 useState 将它们存储到 state 变量中。 然后我使用 state 变量作为图表 js 数据属性的数组。 但是图表的条形图没有显示。 就像数据属性的值没有正确设置一样。 这里看看我的代码。

const [confirmedpeople, setconfirmedpeople] = useState('')
const [recoveredpeople, setrecoveredpeople] = useState('')
const [deathspeople, setdeathspeople] = useState('')

const url= `https://covid19.mathdro.id/api`;
const fetchData= async()=>{
try {
const datas= await axios.get(url)
setconfirmedpeople(datas.data.confirmed.value)
setrecoveredpeople(datas.data.recovered.value)
setdeathspeople(datas.data.recovered.value)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchData()
}, [])


return (
<>
<Bar
data= {{
labels:['confirmed', 'recovered', 'deaths'],
datasets: [{
label: 'CORONA UPDATE',
data: [{confirmedpeople}, {recoveredpeople}, {deathspeople}],
/>

Answer 1

我正在尝试使用 react 和 chart js 创建一个电晕病毒跟踪器。 我从 API 中获取了确认、恢复和死亡的数量，并使用 useState 将它们存储到 state 变量中。 然后我使用 state 变量作为图表 js 数据属性的数组。 但是图表的条形图没有显示。 就像数据属性的值没有正确设置一样。 这里看看我的代码。

const [confirmedpeople, setconfirmedpeople] = useState('')
const [recoveredpeople, setrecoveredpeople] = useState('')
const [deathspeople, setdeathspeople] = useState('')

const url= `https://covid19.mathdro.id/api`;
const fetchData= async()=>{
try {
const datas= await axios.get(url)
setconfirmedpeople(datas.data.confirmed.value)
setrecoveredpeople(datas.data.recovered.value)
setdeathspeople(datas.data.recovered.value)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchData()
}, [])


return (
<>
<Bar
data= {{
labels:['confirmed', 'recovered', 'deaths'],
datasets: [{
label: 'CORONA UPDATE',
data: [{confirmedpeople}, {recoveredpeople}, {deathspeople}],
/>