react本机中的map函数

Question

我想使用一个映射函数来显示标签，但是我在TypeError中得到类似"Cannot read property ' label‘of undefined“的错误：”Cannot read property 'label’of undefined“

我使用单选按钮-react-native来做这件事。它有一个选项: data，它接受一个数据数组。这就是它的工作原理。因此，对于我的代码，正确的方法是执行此data = {data}。我之所以要使用map函数，是因为我想从我的服务器端获取数据。而且看起来什么都不管用

​

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

首先，你的实现of.map是错误的，它不能在react中工作。我猜它应该像这样返回jsx。例如：

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

并从此错误消息"TypeError: Cannot read property 'label‘of undefined"

这意味着RadioButtonRN组件需要一个具有label属性的对象数据数组。在这里，您将在数组中传递jsx。所以它不会起作用。

因此，我建议您不要在此数据上进行映射并传递jsx，只需传递一个具有label属性的普通对象。

您需要在钩子中创建一个状态并获取数据(使用promise或async/await)并更新此状态。您更新的状态数据将放入RadioButtonRN组件中。

在获取或传递某些默认条目时使用条件呈现来隐藏数据