React .map ne fonctionne pas lorsque vous essayez de définir les données à afficher sur le graphique
P粉277464743
2023-08-17 11:56:29
<p>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 : </p>
<pre class="brush:php;toolbar:false;">"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]}))</pre>
<p>J'obtiens l'erreur sur la dernière ligne <code>Impossible de lire les propriétés d'undéfini (lecture de 'map')</code></p>
<p>J'ai essayé de mettre coinChartData dans useEffect et cela fonctionne, mais je ne peux pas utiliser coinChartData en dehors de la fonction useEffect. </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La valeur initiale de
chartest 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.