как сделать карту через этот объект в React Native?

Question

массив объектов

он пытался использовать вот так

 { options.map( opt => {
          return <Text>{opt.value}</Text>
   }) }

Здесь я беру данные с бэкэнда, а я передаю их на экран DetailScreen.

class Poll extends Component {

  state = {
    loading:true,
    pollDetails : []
  }

  componentDidMount(){
    fetch('http://192.168.43.22:5000/api/v1/questions/5f1c31e1089847468cb9c508')
    .then((response) => response.json())
    .then((responseJson) => this.setState({pollDetails:responseJson.data}));
    this.setState({loading:false});
  }
  

  render() {

    const {loading, pollDetails} = this.state;
    
    if(loading){
      <View>
        <Text><ActivityIndicator/></Text>
      </View>
    }

    return(
      <ScrollView>
        <DetailsScreen 
        key={pollDetails._id}
        title={pollDetails.title}
        options={pollDetails.options}
        voteCount={pollDetails.voteCount}
        opinionCount={pollDetails.opinionCount}
        loaded={true}
        votes={60}
        />
      </ScrollView>);    
    }
  }

Здесь я пытаюсь map через параметры, но выдает ошибку!

import React, {Component} from 'react';
import {View, Text, StyleSheet, Animated, TouchableOpacity} from 'react-native';

import Card from '../UI/Card';

export default class DetailScreen extends Component{

    state = {
        width:0,
        voteCount: this.props.voteCount
    }
    
    handleOnLayout = ( {nativeEvent} ) => {
        this.setState({width:nativeEvent.layout.width})
    }
    
    handleVotes = (id) => {
        console.log(this.state.voteCount)
     }
    
    render(){
        const {title, voteCount, votes, opinionCount, loaded} = this.props;


        const _animatedWidth = new Animated.Value(0);
    
        const animatedAnswerValue = () => {     
            const percentage = votes / voteCount;
            const rowWidth = Math.floor(this.state.width * percentage);
            
            Animated.timing(_animatedWidth,{
                toValue:rowWidth,
                duration:1500
            }).start();
        }
        animatedAnswerValue();
        
        const getOverlayStyles = (votes) => {
            const s = [styles.optionBar];
        
            if(votes > 50){
                s.push(styles.optionBarHigh);
            }
            if(votes < 50 && votes > 20){
                s.push(styles.optionBarMedium);
            }
            if(votes <= 20){
                s.push(styles.optionBarLow)
            }
            return s;
        }

        return(
            <View style={{marginLeft:100}}>
                <Text style={{marginTop:50}}>{title}</Text>
                {
                    this.props.options.map((opt,index) => {
                    return <Text key={index}>{opt.votes}</Text>
                    })
                }
                <Text>Just some sample text here!!!</Text>
                    {/* <TouchableOpacity key={options._id[0]} onPress={() => this.handleVotes(options._id)}>
                    <Card>
                        <Text>{options.value}</Text>
                        <View style={styles.optionBarRow} onLayout={this.handleOnLayout}>
                        <Animated.View 
                        style={[getOverlayStyles(this.props.votes,loaded), {width:_animatedWidth}]}/>
                        <View style={styles.opinions}>
                            <Text style={{textAlign:"center"}}>Opinions</Text>
                        </View>
                        </View>
                    </Card>
                    </TouchableOpacity> */}
            </View>
        );
    }
}

, но выдает ошибку «Невозможно прочитать свойство 'map' из undefined

В последнее время я чесал голову ... я буду буду рад, если кто-нибудь разберется для меня! заранее спасибо :)

Answer 1

Возможно, данные не были загружены при самом первом рендеринге. Вы можете попробовать добавить дополнительную проверку наличия опции, например:

{ options && options.map( opt => {
          return <Text>{opt.value}</Text>
}) }