React .map tidak berfungsi apabila cuba menetapkan data untuk paparan pada carta

Question

Saya mahu memaparkan data daripada API pada carta, saya tahu cara melakukannya, tetapi saya mendapat ralat apabila menggunakan fungsi .map. Saya ingin memisahkan harga[0] dan harga[1] supaya saya boleh mengaksesnya kerana respons saya kelihatan seperti ini:

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

Ini ialah kod dengan fungsi .map:

const params = useParams()
    const [syiling, setCoin] = useState({})
    const [carta, 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`

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

    useEffect(() => {
        axios.get(url).then((res) => {
            setCoin(res.data)
            setLoading(benar)
        }).tangkap((ralat) => {
            console.log(error)
        })

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

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

Saya mendapat ralat pada baris terakhir Tidak dapat membaca sifat yang tidak ditentukan (membaca 'peta')

Saya cuba meletakkan coinChartData di dalam useEffect dan ia berfungsi, tetapi saya tidak boleh menggunakan coinChartData di luar fungsi useEffect.

Answer 1

Nilai awal chart ialah objek kosong:

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

Benda ini tidak mempunyai prices属性，所以正如错误所述，chart.prices是undefined.

Anda boleh memulakan sifat ini kepada tatasusunan kosong:

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

Atau gunakan rantaian pilihan apabila mengakses hartanah yang mungkin undefined:

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

Bergantung pada tempat/bagaimana anda akhirnya menggunakan data anda, anda mungkin mempunyai pilihan lain. Namun begitu, jika objek mungkin tidak mempunyai atribut prices, maka anda tidak boleh selalu menggunakan atribut itu. Anda perlu memastikan harta itu sentiasa ada, atau entah bagaimana, semak bersyarat sama ada ia wujud sebelum cuba menggunakannya.