차트에 표시할 데이터를 설정하려고 할 때 React .map이 작동하지 않습니다.
P粉277464743
2023-08-17 11:56:29
<p>API의 데이터를 차트에 표시하고 싶은데 방법을 알고 있는데 .map 함수를 사용할 때 오류가 발생합니다. 내 응답은 다음과 같으므로 가격[0]과 가격[1]을 분리하여 액세스할 수 있도록 하고 싶습니다. </p>
<pre class="brush:php;toolbar:false;">"가격": [
[
1689598842536,
30208.47
],
[
1689602431443,
30274.72
],</pre>
<p>다음은 .map 함수가 포함된 코드입니다. </p>
<pre class="brush:php;toolbar:false;">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]}))</pre>
<p>마지막 줄에서 오류가 발생합니다. <code>정의되지 않은 속성을 읽을 수 없습니다('맵' 읽기)</code></p>
<p>useEffect 내부에 coinChartData를 넣어봤는데 작동하는데, useEffect 함수 외부에서는 coinChartData를 사용할 수 없습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악chart의 초기 값은 빈 개체입니다.이 개체에는
prices属性，所以正如错误所述，chart.prices是undefined이 없습니다.이 속성을 빈 배열로 초기화할 수 있습니다.
으아악또는
속성에 액세스할 때 선택적 연결을 사용하세요. 으아악undefined:데이터를 사용하는 위치/방법에 따라 다른 옵션이 있을 수 있습니다. 그러나 어쨌든 객체에
prices속성이 없으면 항상 해당 속성을 사용할 수는 없습니다. 속성이 항상 존재하는지 확인하거나, 속성을 사용하기 전에 조건부로 속성이 존재하는지 확인해야 합니다.