チャートに表示するデータを設定しようとすると React .map が機能しない
P粉277464743
2023-08-17 11:56:29
<p>API からのデータをチャートに表示したいのですが、その方法はわかっていますが、.map 関数を使用するとエラーが発生します。応答が次のようになっているため、prices[0] とprices[1] を分離してアクセスできるようにしたいと考えています。
<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 [コイン, 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]}))</pre>
<p>最後の行でエラーが発生します<code>未定義のプロパティを読み取ることができません (「マップ」を読み取ります)</code></p>
<p>coinChartDataをuseEffect内に入れてみましたが、うまくいきましたが、useEffect関数の外ではcoinChartDataを使用できません。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリーchartの初期値は空のオブジェクトです:オブジェクトには
pricesプロパティがないため、エラーに示されているように、chart.pricesは未定義です。このプロパティを空の配列に初期化できます:
リーリーまたは、
リーリー未定義の可能性があるプロパティにアクセスする場合は、オプションのチェーンを使用します:データを最終的にどこでどのように使用するかによっては、他のオプションがある場合があります。ただし、いずれにせよ、オブジェクトに
pricesプロパティがない可能性がある場合、そのプロパティを常に使用できるとは限りません。プロパティが常に存在することを確認するか、使用する前に条件付きで存在するかどうかを確認する必要があります。