#typescript #react-hooks
Вопрос:
Я в основном пытаюсь извлечь данные с внутреннего сервера(python), и я создал свой интерфейс диаграммы, в основном я использовал хук useState для хранения получаемых данных, поэтому, когда я получаю обновленные данные, диаграмма обновляется. К сожалению, я долгое время безуспешно пытался это сделать. переменная «данные» внутри useState всегда возвращает значение null или не определено в журнале консоли, использование ее в диаграмме приводит к [объекту объекта]
вот мой код домашней страницы(в react-typescript), я использовал эффект использования для визуализации своей диаграммы
function Home() { const [data, setData] = React.useState([]); fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response =gt;{ console.log(response); return response.json(); }) .then (response =gt;{ console.log(response); setData(response) // console.log(setData(response)) }) useEffect(() =gt; { const ctx = document.getElementById('myChart') as HTMLCanvasElement; const myChart = new Chart(ctx, { type: 'bar', data: { labels: [ {data}, {data}, 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { maintainAspectRatio: false, responsive: true, layout:{ padding:{ left:800, top:0 } }, scales: { y: { beginAtZero: true } } } }); return () =gt; {myChart.destroy()}}, []); return( HTML Page)