React .map funktioniert nicht, wenn versucht wird, Daten für die Anzeige im Diagramm festzulegen
P粉277464743
2023-08-17 11:56:29
<p>Ich möchte Daten aus der API in einem Diagramm anzeigen. Ich weiß, wie das geht, erhalte jedoch eine Fehlermeldung, wenn ich die .map-Funktion verwende. Ich möchte Preise[0] und Preise[1] trennen, damit ich darauf zugreifen kann, da meine Antwort so aussieht: </p>
<pre class="brush:php;toolbar:false;">"Preise": [
[
1689598842536,
30208.47
],
[
1689602431443,
30274.72
],</pre>
<p>Dies ist der Code mit der .map-Funktion: </p>
<pre class="brush:php;toolbar:false;">const params = useParams()
const [coin, setCoin] = useState({})
const [chart, 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`
const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}`
useEffect(() => {
axios.get(url).then((res) => {
setCoin(res.data)
setLoading(true)
}).catch((error) => {
console.log(Fehler)
})
axios.get(chartUrl).then((res) => {
setChart(res)
}).catch((error) => {
console.log(Fehler)
})
}, [])
constcoinChartData = chart.prices.map(value => ({x: value[0], y: value[1]}))</pre>
<p>Ich erhalte die Fehlermeldung in der letzten Zeile <code>Eigenschaften von undefiniert können nicht gelesen werden (liest 'map')</code></p>
<p>Ich habe versucht, „coinChartData“ in „useEffect“ einzufügen, und es funktioniert, aber ich kann „coinChartData“ nicht außerhalb der Funktion „useEffect“ verwenden. </p>
初始值为
chart的是一个空对象：const [chart, setChart] = useState({})该对象没有
prices属性，所以正如错误所述，chart.prices是undefined。你可以将该属性初始化为空数组：
const [chart, setChart] = useState({ prices: [] })或者在访问可能为
undefined的属性时使用可选链：const coinChartData = chart.prices?.map(value => ({x: value[0], y: value[1]}))根据最终使用数据的位置/方式，您可能还有其他选项。但无论如何，如果对象可能没有
prices属性，那么您不能总是使用该属性。您需要确保该属性始终存在，或者在尝试使用之前以某种方式有条件地检查它是否存在。