时间戳

首页 > 解决方案 > 调用处理程序时，在反应导航中使用下拉组件会引发错误

reactjs - 调用处理程序时，在反应导航中使用下拉组件会引发错误

问题描述

我正在尝试将 react-navigation 与 react-native-dropdown 一起使用，以便在标题中有一个下拉菜单来更改下面视图中呈现的内容。

每当我尝试执行处理程序时，react-native-dropdown 当 react-native-dropdown 尝试再次渲染并映射时，我会收到错误“未定义不是函数（附近'...this.props.data.map'）使用 (this.props.data.map((rows, index) => 等的下拉菜单。

下面是我正在使用的代码：

import React, {Component} from "react"
import {Dimensions, ScrollView, StyleSheet, width, View, TouchableOpacity} from "react-native"
import {Images} from "../../theme"
import DropdownMenu from 'react-native-dropdown-menu';
import Pdf from 'react-native-pdf';
import { Header } from "react-native/Libraries/NewAppScreen";
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { drop } from "lodash";


class InformationScreen extends Component {
  constructor(props) {
    super(props)
    var informationScreens = props.global.appConfig.information_screens
    var informationScreenTitles = Object.keys(informationScreens)
    state = {
      informationScreens: informationScreens,
      selectedDropdown: informationScreens[0]
    }
}
static navigationOptions = ({ navigation }) => {
  return {
    headerTitle:  <DropdownMenu
    style={{flex: 1}}
    bgColor={'clear'}
    tintColor={'#666666'}
    activityTintColor={'rgba(2, 122, 255, 1.0)'}
    // arrowImg={}
    // checkImage={}
    // optionTextStyle={{color: '#333333'}}
    // titleStyle={{color: '#333333'}}
    // maxHeight={300}
  handler={(selection, row) => navigation.setParams({'headerTitle': navigation.state.params[selection][row]})}
  data={navigation.state.params}
  />
  };
};


    render() {
        return (
          <View style={styles.container}>

          <Pdf
          source={{ uri: "https://someurl.com/dl/sites/default/files/page/2020%20BYU%20Football%20Almanac_3.pdf", cache: true}}
          onLoadComplete={(numberOfPages,filePath)=>{
            console.log(`number of pages: ${numberOfPages}`);
        }}
        style={styles.pdf}
          />
          </View>
        )
    }
}


const styles = StyleSheet.create({
    image: {
        flex: 1,
    },
    container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 25,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width,
      height:Dimensions.get('window').height,
  }
})

function mapStateToProps(state) {
  const global = state.get('global');
  return {  global };
}

export default connect(mapStateToProps)(InformationScreen);

标签： reactjsreact-native

解决方案

我怀疑this.props.data要么没有提供，要么没有数组，所以this.props.data.map是未定义的，尝试调用它会给你一个“未定义不是函数”错误。是navigation.state.params数组吗？

如果你通过data={navigation.state.params || []}了，问题会消失吗？

推荐阅读