React Native MultipleSelect报错：getSelectedItemsExt未定义+提交按钮不显示

看起来你在使用react-native-multiple-select组件时遇到了两个棘手的问题，我来帮你逐一排查解决：

问题1：Cannot read the property 'getSelectedItemsExt' of undefined 错误 #

这个报错的核心原因是：你尝试调用的getSelectedItemsExt方法找不到对应的组件实例，大概率是没有给MultiSelect组件绑定正确的引用（ref），或者在组件还没完成挂载时就调用了它的方法。

具体解决方案： #

1. 给MultiSelect添加ref引用
   在组件的构造函数里初始化ref，然后在渲染MultiSelect时绑定它，确保能拿到组件实例：

   constructor() {
     super()
     // 初始化ref（两种方式选其一即可）
     this.multiSelectRef = React.createRef(); 
     // 或者回调式ref：this.multiSelectRef = null;
     this.state = {
       isLoading: true,
       selectedPublishers1:[],
       publishersByCategory: [],
       publishersByClient: [],
       publishersByGroup: [],
       dataSource:[],
       categories: [] // 记得在state里提前声明categories
     }
   }
   
   // 渲染MultiSelect时绑定ref
   render() {
     return (
       <MultiSelect
         ref={this.multiSelectRef} 
         // 或者回调式写法：ref={(ref) => this.multiSelectRef = ref}
         items={this.state.categories} // 确保传入正确的数据源
         uniqueKey="id" // 根据你的categories数据结构设置唯一键
         onSelectedItemsChange={this.onSelectedPublishersByCategoryChange}
         selectedItems={this.state.publishersByCategory}
         // ...其他必要props
       />
     )
   }
   

2. 确保调用时机正确
   不要在组件未挂载完成时调用getSelectedItemsExt，比如避免在componentWillMount里调用，最好放在用户交互事件（比如提交按钮的点击事件）或者componentDidMount之后的生命周期里。
3. 检查依赖安装情况
   确认你已经正确安装并链接了组件（新版本RN自动链接，旧版本可能需要手动执行）：

   npm install react-native-multiple-select --save
   # 旧版本RN执行链接命令
   react-native link react-native-multiple-select
   

问题2：提交按钮未显示 #

从你提供的代码片段来看，可能的原因和解决方向如下：

可能的原因&修复方案： #

1. 布局容器问题
   你使用了ScrollView，如果按钮放在ScrollView外部但父容器没有设置flex:1，或者放在内部但被其他组件遮挡/布局挤压，都会导致按钮不显示。建议把按钮放在ScrollView内部，并给容器和按钮设置明确的样式：

   render() {
     return (
       <ScrollView style={styles.container}>
         {/* 你的MultiSelect、其他表单组件 */}
         {/* 添加提交按钮 */}
         <TouchableOpacity style={styles.submitBtn} onPress={this.handleSubmit}>
           <Text style={styles.btnText}>提交</Text>
         </TouchableOpacity>
       </ScrollView>
     )
   }
   
   // 对应的样式
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       paddingHorizontal: 16,
       paddingVertical: 20
     },
     submitBtn: {
       backgroundColor: '#007AFF',
       padding: 14,
       borderRadius: 8,
       marginTop: 30
     },
     btnText: {
       color: '#fff',
       fontSize: 16,
       textAlign: 'center',
       fontWeight: '500'
     }
   })
   

2. 代码遗漏或语法错误
   你提供的onSelectedPublishersByCategoryChange方法代码不完整（this.setState({ publishersByCatego...），这种语法错误会导致组件渲染失败，进而可能影响按钮的显示。记得补全代码：

   onSelectedPublishersByCategoryChange = (publishersByCategory) => {
     console.log(publishersByCategory);
     this.setState({ 
       publishersByCategory: publishersByCategory 
     });
   }
   

3. 样式冲突
   检查是否有样式设置了display: 'none'、opacity: 0，或者父组件的overflow: 'hidden'导致按钮被裁剪。

额外优化建议 #

在componentDidMount获取数据后，记得把isLoading设置为false，避免加载指示器一直遮挡内容：

.then((responseJson) => {
  this.setState({
    categories: responseJson.PublisherByCategory,
    isLoading: false
  });
})

内容的提问来源于stack exchange，提问作者Khushboo Gupta