React .map ne fonctionne pas lorsque vous essayez de définir les données à afficher sur le graphique

Question

Je souhaite afficher les données de l'API sur un graphique, je sais comment faire, mais j'obtiens une erreur lors de l'utilisation de la fonction .map. Je souhaite séparer les prix[0] et les prix[1] afin de pouvoir y accéder puisque ma réponse ressemble à ceci :

"prix": [
    [
      1689598842536,
      30208.47
    ],
    [
      1689602431443,
      30274.72
    ],≪/pré>
<p>Voici le code avec la fonction .map : </p>
<pre class="brush:php;toolbar:false;">const params = useParams()
    const [pièce, setCoin] = useState({})
    const [graphique, setChart] = useState({})
    const [chargement, 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.données)
            setChargement (vrai)
        }).catch((erreur) => {
            console.log (erreur)
        })

        axios.get(chartUrl).then((res) => {
            setChart(res)
        }).catch((erreur) => {
            console.log (erreur)
        })
    }, [])

    const coinChartData = chart.prices.map(value => ({x : valeur[0], y : valeur[1]}))

J'obtiens l'erreur sur la dernière ligne Impossible de lire les propriétés d'undéfini (lecture de 'map')

J'ai essayé de mettre coinChartData dans useEffect et cela fonctionne, mais je ne peux pas utiliser coinChartData en dehors de la fonction useEffect.

Answer 1

La valeur initiale de chart est un objet vide :

const [chart, setChart] = useState({})

Cet objet n'a pas prices属性，所以正如错误所述，chart.prices是undefined.

Vous pouvez initialiser cette propriété sur un tableau vide :

const [chart, setChart] = useState({ prices: [] })

Ou utilisez le chaînage facultatif lors de l'accès aux propriétés qui peuvent être undefined :

const coinChartData = chart.prices?.map(value => ({x: value[0], y: value[1]}))

En fonction de l'endroit et de la manière dont vous utilisez vos données, vous pouvez avoir d'autres options. Mais de toute façon, si l’objet n’a pas l’attribut prices, alors vous ne pouvez pas toujours utiliser cet attribut. Vous devez vous assurer que la propriété est toujours présente, ou vérifier d'une manière ou d'une autre conditionnellement si elle existe avant d'essayer de l'utiliser.