reactjs - 将 prop 元素设置为状态

Question

我正在映射一个对象数组并将其作为要填充它的道具传递，如下所示。

const bottomData = [
{
    name: 'Beneficial Owner Details',
    id:'1',
},

{
    name: 'Residential Address',
    id:'2',
},]

 mapData() {
    return bottomData.map(list => <Card key={list.id} dataItems={list}/>)

 }

这是我提取对象并根据需要填充细节的地方。

export default class Card extends Component {
 constructor(props) {
    super(props);
    this.state = {
        sectionId: ''
    }
 }

sectionPress() {
 if (this.props.dataItems.id == "1"){
    alert("ID is 1")
 }
}
 render() {
    return (
   <TouchableHighlight onPress={this.sectionPress}>
     <View >
        <Text>{this.props.dataItems.name}</Text>         
     </View>
   </TouchableHighlight>
    )
 }
}

我的目标是显示带有被单击对象的“id”编号的警报。截至目前，我收到一条错误消息，提示“无法读取未定义的属性 dataItems”。我在这里缺少什么。我也尝试将其设置为状态，但没有奏效并给出了同样的错误。

标签： reactjsreact-native