反应原生中的地图功能

Question

i want to use a map function to display the label but i get an error like "Cannot read property 'label' of undefined" in TypeError: Cannot read property 'label' of undefined"

I'm using radio-buttons-react-native to do this. it has an option: data and it accepts an array of data. This is how it works. So for my code, the right way is to do this data = {data} . The reason why I want to use the map function is because I want to get the data from my server side. and it seems nothing is working

 import * as React from 'react'; import { useState } from 'react'; import { Button, View, Text, Image, SafeAreaView, ScrollView, } from 'react-native'; import RadioButtonRN from 'radio-buttons-react-native'; import { Card, Title } from 'react-native-paper'; import Icon from 'react-native-vector-icons/FontAwesome'; import Constants from 'expo-constants'; function App() { const [data, setData] = useState([{ label: 'data 1' }, { label: 'data 2' }, ]); const [SecondData, setSecondData] = useState([{ label: 'data 5' }, { label: 'data 6' }, { label: 'data 7' }, { label: 'data 8' }, ]); const keeper = data.map((item) => { < Text > { item.label } < /Text> console.log(item.label) }) return ( < SafeAreaView > < ScrollView showsVerticalScrollIndicator > < View style = { { marginTop: Constants.statusBarHeight } } > < Card mode = "outlined" style = { { borderColor: 'blue', padding: 10, backgroundColor: '#ccc', } } > < Card.Content > < Title > SRC PRESIDENT < /Title> < /Card.Content> < RadioButtonRN data = { keeper } selectedBtn = { (e) => console.log(e) } icon = { < Icon name = "stop-circle" size = { 25 } color = "#2c9dd1" / > } /> < /Card> < Card mode = "outlined" style = { { borderColor: 'blue', marginTop: 20, padding: 10, backgroundColor: '#ccc', } } > < Card.Content > < Title > GENERAL SECRETARY < /Title> < /Card.Content> < RadioButtonRN data = { SecondData } selectedBtn = { (e) => console.log(e) } icon = { < Icon name = "check-circle" size = { 25 } color = "#2c9dd1" / > } /> < /Card> < /View> < /ScrollView> < /SafeAreaView> ); } export default App;

Answer 1

first of all your implementation of.map is wrong it will not work in react. I guess it should return the jsx like this. eg.

const keeper = data.map((item)=>(<Text>{item.label}</Text>))

and from this error msg "TypeError: Cannot read property 'label' of undefined"

it means the RadioButtonRN component requires an array of object data with label property. and here you are passing jsx inside the array. so it will not work.

so I would suggest you instead of mapping over this data and passing jsx just pass a plain object with label property.

you need to create a state in hook and fetch data (use promise or async/await) and update this state. and your updated state data will go inside RadioButtonRN component.

use conditional rendering to hide data while fetching or pass some default entries