차트에 표시할 데이터를 설정하려고 할 때 React .map이 작동하지 않습니다.

Question

API의 데이터를 차트에 표시하고 싶은데 방법을 알고 있는데 .map 함수를 사용할 때 오류가 발생합니다. 내 응답은 다음과 같으므로 가격[0]과 가격[1]을 분리하여 액세스할 수 있도록 하고 싶습니다.

"가격": [
    [
      1689598842536,
      30208.47
    ],
    [
      1689602431443,
      30274.72
    ],

다음은 .map 함수가 포함된 코드입니다.

const params = useParams()
    const [coin, setCoin] = useState({})
    const [차트, 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)
            세트로딩(참)
        }).catch((오류) => {
            console.log(오류)
        })

        axios.get(chartUrl).then((res) => {
            세트차트(res)
        }).catch((오류) => {
            console.log(오류)
        })
    }, [])

    const coinChartData = 차트.가격.map(값 => ({x: 값[0], y: 값[1]}))

마지막 줄에서 오류가 발생합니다. 정의되지 않은 속성을 읽을 수 없습니다('맵' 읽기)

useEffect 내부에 coinChartData를 넣어봤는데 작동하는데, useEffect 함수 외부에서는 coinChartData를 사용할 수 없습니다.

Answer 1

chart의 초기 값은 빈 개체입니다.

으아악

이 개체에는 prices属性，所以正如错误所述，chart.prices是undefined이 없습니다.

이 속성을 빈 배열로 초기화할 수 있습니다.

으아악

또는 undefined:

속성에 액세스할 때 선택적 연결을 사용하세요. 으아악

데이터를 사용하는 위치/방법에 따라 다른 옵션이 있을 수 있습니다. 그러나 어쨌든 객체에 prices 속성이 없으면 항상 해당 속성을 사용할 수는 없습니다. 속성이 항상 존재하는지 확인하거나, 속성을 사용하기 전에 조건부로 속성이 존재하는지 확인해야 합니다.