state.map 不是 React-Native 的函数答案

【问题标题】：state.map is not a function React-Nativestate.map 不是 React-Native 的函数
【发布时间】：2020-06-05 14:55:12
【问题描述】：

我在一个项目中遇到问题，运行apk时出现以下错误：

state.map 不是 React-Native 函数谁不带.map。

代码：

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>

Error on device

【问题讨论】：

请将您的问题翻译成英文。这将使开发人员能够在工作中帮助您回答您的问题。

标签： react-native

【解决方案1】：

改成这样：

//...
        {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/>

【讨论】：

【解决方案2】：

<Picker
                selectedValue = {moneda}
                onValueChange={  moneda => obtenerMoneda(moneda)  }
                itemStyle={{  height:120 }}
                >
               <Picker.Item label="- Seleccione -" value=''/>
                { ( criptomonedas || [] ).map( cripto=> ( <Picker.Item  key={ cripto.CoinInfo.Id } label={ cripto.CoinInfo.FullName } value={ cripto.CoinInfo.Name }/>) ) }
            </Picker>

【讨论】：

不要只是发布代码，还要添加几句话解释为什么这段代码应该工作以及问题中发布的代码有什么问题。