折線圖數據未顯示

Question

我正在嘗試使用chartjs構建一個LineChart，但是我在讀取圖表數據時遇到了一些問題，即使數據是從服務器傳輸的，日期和coin_value的console.log函數由於某種原因返回null正如它應該。 知道有什么問題嗎？

這是現在帶有控制台的網頁：

這是我的代碼：

import { Link } from "react-router-dom";
import { Line } from "react-chartjs-2";
import {Chart as chartjs, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement} from "chart.js";

chartjs.register(
  Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)

function BitCoin() {
  const [data, setData] = React.useState(null);
  const [dates, setDates] = React.useState(null);
  const [coinValue, setCoinValue] = React.useState(null);


  React.useEffect(() => {
    fetch("http://localhost:3001/bitcoin")
      .then((res) => res.json()) 
      .then((data) => {

        const twoDimensionArr = data.message;
        setData(twoDimensionArr);               
        setDates(twoDimensionArr.map(item => item[0]));    
        setCoinValue(twoDimensionArr.map(item => item[1]));
   })
   .then(console.log(dates))
   .then(console.log(coinValue))
  }, []);

  const [chartData, setChartData] = useState({
    labels: dates,
    datasets: [{
      label: "value of BTC in ILS",
      data: coinValue,
      backgroundColor: 'gold'
    }]
  }, [data])

  return (
    <div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
      THIS IS THE BitCoin PAGE

      <nav>
        <Link to="/"> Home </Link>
      </nav>

      <nav>
        <Link to="/coins"> Coins </Link>
      </nav>

      <Line
      data = {chartData}
      />

    </div>
  )
}

export default BitCoin;

Answer 1

Usestate 沒有自動更新的依賴數組，因此您的chartData永遠不會得到更新。 在您的 fetch 中，您需要使用正確的值調用setChartData 。

React.useEffect(() => {
  fetch("http://localhost:3001/bitcoin")
    .then((res) => res.json())
    .then((data) => {

      const twoDimensionArr = data.message;
      setData(twoDimensionArr);
      setDates(twoDimensionArr.map(item => item[0]));
      setCoinValue(twoDimensionArr.map(item => item[1]));
      setChartData({
        labels: twoDimensionArr.map(item => item[0]),
        datasets: [{
          label: "value of BTC in ILS",
          data: twoDimensionArr.map(item => item[1]),
          backgroundColor: 'gold'
        }]
      })
    })
    .then(console.log(dates))
    .then(console.log(coinValue))
}, []);