React .map tidak berfungsi apabila cuba menetapkan data untuk paparan pada carta
P粉277464743
2023-08-17 11:56:29
<p>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: </p>
<pre class="brush:php;toolbar:false;">"harga": [
[
1689598842536,
30208.47
],
[
1689602431443,
30274.72
],</pre>
<p>Ini ialah kod dengan fungsi .map: </p>
<pre class="brush:php;toolbar:false;">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]}))</pre>
<p>Saya mendapat ralat pada baris terakhir <kod>Tidak dapat membaca sifat yang tidak ditentukan (membaca 'peta')</code></p>
<p>Saya cuba meletakkan coinChartData di dalam useEffect dan ia berfungsi, tetapi saya tidak boleh menggunakan coinChartData di luar fungsi useEffect. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nilai awal
chartialah 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.