React .map funktioniert nicht, wenn versucht wird, Daten für die Anzeige im Diagramm festzulegen

Question

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:

"Preise": [
    [
      1689598842536,
      30208.47
    ],
    [
      1689602431443,
      30274.72
    ],

Dies ist der Code mit der .map-Funktion:

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]}))

Ich erhalte die Fehlermeldung in der letzten Zeile Eigenschaften von undefiniert können nicht gelesen werden (liest 'map')

Ich habe versucht, „coinChartData“ in „useEffect“ einzufügen, und es funktioniert, aber ich kann „coinChartData“ nicht außerhalb der Funktion „useEffect“ verwenden.

Answer 1

初始值为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属性，那么您不能总是使用该属性。您需要确保该属性始终存在，或者在尝试使用之前以某种方式有条件地检查它是否存在。