Reactjs 在react导航中使用下拉组件会在调用处理程序时引发错误

我正在尝试将react导航与react native dropdown一起使用，以便在标题中有一个下拉列表来更改下面视图中呈现的内容

每当我尝试执行处理程序时，react native dropdown会在react native dropdown尝试再次渲染并使用（this.props.data.map（（行，索引）=>等）映射下拉列表时出现错误“undefined不是函数（靠近“…this.props.data.map”）

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

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);

import React，{Component}来自“React”
从“react native”导入{Dimensions，ScrollView，StyleSheet，width，View，TouchableOpacity}
从“./../theme”导入{Images}
从“反应本机下拉菜单”导入下拉菜单；
从“react native Pdf”导入Pdf；
从“react native/Libraries/NewAppScreen”导入{Header}；
从'react redux'导入{connect}；
从“react navigation”导入{NavigationActions}；
从“lodash”导入{drop}；
类信息屏幕扩展组件{
建造师（道具）{
超级（道具）
var informationScreens=props.global.appConfig.information\u屏幕
var informationScreenTitles=对象键（informationScreens）
状态={
信息屏幕：信息屏幕，
selectedDropdown:信息屏幕[0]
}
}
静态导航选项=（{navigation}）=>{
返回{
headerTitle:navigation.setParams（{'headerTitle'：navigation.state.params[selection][row]}）
数据={navigation.state.params}
/>
};
};
render（）{
返回(
{
log（`number of pages:${numberOfPages}`）；
}}
style={styles.pdf}
/>
)
}
}
const styles=StyleSheet.create({
图片：{
弹性：1，
},
容器：{
弹性：1，
justifyContent:“flex start”，
对齐项目：“居中”，
玛金托普：25，
},
pdf:{
弹性：1，
宽度：尺寸。获取（'窗口'）。宽度，
高度：尺寸。获取（“窗口”）。高度，
}
})
函数MapStateTops（状态）{
const global=state.get（'global'）；
返回{global}；
}
导出默认连接（MapStateTops）（信息屏幕）；

我怀疑

this.props.data

不是提供的就是不是数组，所以

this.props.data.map

是未定义的，尝试调用它会导致“未定义不是函数”错误。

navigation.state.params

是数组吗

---

如果你通过

data={navigation.state.params | |【】

问题解决了吗？

雷你完全正确，我在你发布前大约5分钟就解决了

navigation.state.params是有效的，下拉列表将填充，但是当我尝试设置params时，它会将params的格式更改为JSON对象而不是数组

通过将数组中的一个JSON对象放深一点，使该对象在调用setParams后仍然包含数组，从而解决了这一问题。然后，我在数据中调用了该对象

data={navigation.state.params.informationScreens} 

非常感谢您的帮助，我将开始更频繁地使用StackOverflow