state.map不是函数React-Native

问题描述 投票:-1回答:1

这是我第一次参加Stackoverflow,原因是因为我在一个项目中遇到问题,当我运行不带.map的apk时会警告错误。代码开始像:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Picker } from '@react-native-community/picker';
import axios from 'axios';

const Formulario = () =>{
    const [moneda, guardarMoneda] = useState('');
    // este primer state de criptomoneda sirve para saber la seleccion del usuario
    const [criptomoneda, guardarCriptomoneda] = useState('');
    // este segundo muestra el estado de las 10 criptomonedas mas importantes
    const [criptomonedas, guardarCriptomonedas] = useState('');

useEffect (() => {
    const consultarApi = async() => {
        const url = 'https://min-api.cryptocompare.com/data/top/totaltoptiervolfull?limit=10&tsym=USD';
        const resultado = await axios.get(url);
        guardarCriptomonedas(resultado.data.Data);
        console.log(resultado.data.Data);
    };
    consultarApi();

}, []);
console.log(criptomonedas);

const obtenerMoneda = moneda =>{
    guardarMoneda(moneda);
};

const obtenerCriptoMoneda = cripto =>{
    guardarCriptomoneda(cripto);
};

在“ return()”内部,问题出现在“ criptomonedas.map”中:

<Picker
     selectedValue={criptomoneda}
     onValueChange={ cripto => obtenerCriptoMoneda(cripto)}>
     <Picker.Item label="- Seleccione -" value=""/>

        {criptomonedas.map(cripto => (
        <Picker key={cripto.CoinInfo.Id} label={cripto.CoinInfo.FullName} value={cripto.CoinInfo.Name}/>
         ))};
 </Picker>

Apk img problem

react-native
1个回答
0
投票

更改为此:

//...
        {criptomonedas && Array.isArray(criptomonedas) && criptomonedas.map(cripto => (
        <Picker key={cripto.CoinInfo.Id} label={cripto.CoinInfo.FullName} value={cripto.CoinInfo.Name}/>
         ))};
// ...

[看起来您的criptomonedas不是第一次渲染中的数组。

也可以在渲染选择器之前检查它:

if (!criptomonedas || !Array.isArray(criptomonedas))
   return <ActivityIndicator>
return <Picker/>
© www.soinside.com 2019 - 2024. All rights reserved.