React Native类组件中react-native-dropdown-picker选择项崩溃问题

先修复代码中的致命语法错误 #

你的代码存在两处语法问题，是导致崩溃的核心原因：

• items数组的字符串引号未闭合：每个对象的label和value字段字符串都未正确闭合，比如{label: 'Value1, value: 'val1'}需修正为{label: 'Value1', value: 'val1'}，所有子项都要做同样调整。
• handleValueChanged中的setState调用错误：缺少this关键字且括号不匹配，正确写法应为：

handleValueChanged = (newVal) => {
  this.setState(state => ({ value: newVal }));
}

修正setValue的绑定逻辑 #

你提到newVal输出为函数而非数组，这是因为组件在多选模式（value为数组）下的参数传递逻辑需要配合正确的属性配置：

1. 显式开启多选模式：虽然设置了mode="BADGE"，但必须指定multiple={true}（默认是单选），否则组件会将value当作单个值处理，引发参数类型异常。
2. 直接在setValue中用箭头函数更新状态，避免函数引用传递异常：

<DropDownPicker
  open={this.state.open}
  value={this.state.value}
  items={this.state.items}
  setOpen={(open) => this.setState({ open })}
  setValue={(newVal) => this.setState({ value: newVal })}
  setItems={(items) => this.setState({ items })}
  mode="BADGE"
  multiple={true}
/>

完整修正后的代码示例 #

import DropDownPicker from 'react-native-dropdown-picker';
import { Component } from 'react';

class MyClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      value: ['val1', 'val2', 'val3'],
      items: [
        { label: 'Value1', value: 'val1' },
        { label: 'Value1_1', value: 'val1_1', parent: 'val1' },
        { label: 'Value1_2', value: 'val1_2', parent: 'val1' },
        { label: 'Value2', value: 'val2' },
        { label: 'Value2_1', value: 'val2_1', parent: 'val2' },
        { label: 'Value2_2', value: 'val2_2', parent: 'val2' },
        { label: 'Value3', value: 'val3' },
        { label: 'Value3_1', value: 'val3_1', parent: 'val3' },
        { label: 'Value3_2', value: 'val3_2', parent: 'val3' }
      ],
    };
  }

  render() {
    return (
      <>
        <DropDownPicker
          open={this.state.open}
          value={this.state.value}
          items={this.state.items}
          setOpen={(open) => this.setState({ open })}
          setValue={(newVal) => this.setState({ value: newVal })}
          setItems={(items) => this.setState({ items })}
          mode="BADGE"
          multiple={true}
        />
      </>
    );
  }
}

关键说明 #

• 必须显式设置multiple={true}：初始value为数组，组件需要明确知晓是多选模式，否则会出现参数类型不匹配错误。
• 避免不必要的中间函数：直接在setValue中使用箭头函数更新状态，可有效避免函数引用传递时的上下文或参数异常。
• 优先修复语法错误：语法错误会引发组件初始化或运行时的未知异常，需先修正再排查逻辑问题。

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