チャートに表示するデータを設定しようとすると React .map が機能しない

Question

API からのデータをチャートに表示したいのですが、その方法はわかっていますが、.map 関数を使用するとエラーが発生します。応答が次のようになっているため、prices[0] とprices[1] を分離してアクセスできるようにしたいと考えています。

"価格": [
    [
      1689598842536、
      30208.47
    ]、
    [
      1689602431443、
      30274.72
    ]、

これは .map 関数を使用したコードです:

const params = useParams()
    const [コイン, setCoin] = useState({})
    const [chart, setChart] = useState({})
    const [ロード中、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((エラー) => {
            コンソールログ(エラー)
        })

        axios.get(chartUrl).then((res) => {
            setChart(res)
        }).catch((エラー) => {
            コンソールログ(エラー)
        })
    }、[])

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

最後の行でエラーが発生します未定義のプロパティを読み取ることができません (「マップ」を読み取ります)

coinChartDataをuseEffect内に入れてみましたが、うまくいきましたが、useEffect関数の外ではcoinChartDataを使用できません。

Answer 1

chart の初期値は空のオブジェクトです:

リーリー

オブジェクトには prices プロパティがないため、エラーに示されているように、chart.prices は 未定義です。

このプロパティを空の配列に初期化できます:

リーリー

または、未定義の可能性があるプロパティにアクセスする場合は、オプションのチェーンを使用します:

リーリー

データを最終的にどこでどのように使用するかによっては、他のオプションがある場合があります。ただし、いずれにせよ、オブジェクトに prices プロパティがない可能性がある場合、そのプロパティを常に使用できるとは限りません。プロパティが常に存在することを確認するか、使用する前に条件付きで存在するかどうかを確認する必要があります。