圖表 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}],
/>