在嘗試設定用於顯示在圖表上的資料時，React .map不起作用

Question

我想在圖表上顯示來自API的數據，我知道如何做，但在使用.map函數時出現錯誤。我想將prices[0]和prices[1]分開，以便可以訪問它們，因為我的回應看起來像這樣：

"prices": [
    [
      1689598842536,
      30208.47
    ],
    [
      1689602431443,
      30274.72
    ],

這是有.map函數的程式碼：

const params = useParams()
    const [coin, setCoin] = useState({})
    const [chart, setChart] = useState({})
    const [loading, setLoading] = useState(false)

    const chartUrl = `https://api.coingecko.com/api/v3/coins/${params.coinId}/market_chart?vs_currency=usd&days=30&precision=2`

    const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}`

    useEffect(() => {
        axios.get(url).then((res) => {
            setCoin(res.data)
            setLoading(true)
        }).catch((error) => {
            console.log(error)
        })

        axios.get(chartUrl).then((res) => {
            setChart(res)
        }).catch((error) => {
            console.log(error)
        })
    }, [])

    const coinChartData = chart.prices.map(value => ({x: value[0], y: value[1]}))

我在最後一行得到了錯誤 Cannot read properties of undefined (reading 'map')

我嘗試將coinChartData放在useEffect內部，它可以工作，但我無法在useEffect函數之外使用coinChartData。

Answer 1

初始值為chart的是一個空物件：

const [chart, setChart] = useState({})

該物件沒有prices屬性，所以如錯誤所述，chart.prices是undefined。

你可以將該屬性初始化為空數組：

const [chart, setChart] = useState({ prices: [] })

或在存取可能為undefined的屬性時使用可選鏈：

const coinChartData = chart.prices?.map(value => ({x: value[0], y: value[1]}))

根據最終使用資料的位置/方式，您可能還有其他選項。但無論如何，如果物件可能沒有prices屬性，那麼您不能總是使用該屬性。您需要確保該屬性始終存在，或者在嘗試使用之前以某種方式有條件地檢查它是否存在。