React-Native中如何根据一个Picker的选择重新渲染另一个Picker的选项？

嘿，我来帮你搞定这个联动Picker的需求！你的思路是对的，但代码里有个小问题——renderIf并不是React的合法语法，我们可以通过数组过滤来实现你想要的效果。

核心思路 #

当第一个Picker的选中值变化时，我们对第二个Picker的数据源cluster进行过滤，只保留key和第一个Picker选中值匹配的项，然后渲染这些过滤后的选项即可。

修改后的完整代码 #

import React, { Component } from 'react';
import { Picker, View } from 'react-native';

class LinkedPickers extends Component {
  constructor(props) {
    super(props);
    // 定义数据源
    this.options = ["Home","Savings","Car","GirlFriend"];
    this.cluster = [
      {item:"abc",key:"Home"},
      {item:"def",key:"Savings"},
      {item:"ghi",key:"Savings"},
      {item:"jkl",key:"Car"}
    ]; 
    // 初始化状态
    this.state = {
      selected_picker_1: "",
      selected_picker_2: "",
    };
    // 绑定事件处理函数，避免重复创建
    this.onValueChangePicker1 = this.onValueChangePicker1.bind(this);
    this.onValueChangePicker2 = this.onValueChangePicker2.bind(this);
  }

  // 第一个Picker值变化时的处理
  onValueChangePicker1(value) {
    // 切换选项时重置第二个Picker的选中值，避免残留旧值
    this.setState({ 
      selected_picker_1: value,
      selected_picker_2: ""
    });
  }

  // 第二个Picker值变化时的处理
  onValueChangePicker2(value) {
    this.setState({ selected_picker_2: value });
  }

  render() {
    // 关键：过滤出和第一个Picker选中值匹配的cluster项
    const filteredCluster = this.cluster.filter(item => item.key === this.state.selected_picker_1);

    return (
      <View>
        {/* 第一个Picker */}
        <Picker 
          mode="dropdown" 
          placeholder="Select One" 
          style={{ width: undefined, backgroundColor:"white", marginTop:5}} 
          selectedValue={this.state.selected_picker_1} 
          onValueChange={this.onValueChangePicker1}
        >
          {this.options.map((item) => (
            <Picker.Item label={item} value={item} key={item}/>
          ))}
        </Picker>

        {/* 第二个联动Picker */}
        <Picker 
          mode="dropdown" 
          placeholder="Select One" 
          style={{ width: undefined, backgroundColor:"white", marginTop:5}} 
          selectedValue={this.state.selected_picker_2} 
          onValueChange={this.onValueChangePicker2}
          // 没有可选项时禁用Picker，提升体验
          enabled={filteredCluster.length > 0}
        >
          {/* 根据过滤结果渲染选项 */}
          {filteredCluster.length > 0 ? (
            filteredCluster.map((item, index) => (
              <Picker.Item label={item.item} value={index} key={index}/>
            ))
          ) : (
            // 空状态提示
            <Picker.Item label="请先选择上方的选项" value="" enabled={false}/>
          )}
        </Picker>
      </View>
    );
  }
}

export default LinkedPickers;

关键修改说明 #

1. 替换renderIf为Array.filter()：用过滤方法筛选出符合条件的选项，这是React中处理条件渲染列表的标准方式。
2. 重置第二个Picker的选中值：当第一个Picker切换选项时，清空第二个Picker的选中状态，避免显示不符合当前分类的旧值。
3. 添加禁用逻辑：当第二个Picker没有可选项时禁用它，防止用户无效操作。
4. 空状态提示：给用户明确的引导，告诉他们需要先完成第一个Picker的选择。

如果你的项目使用的是函数式组件，逻辑也是类似的——用useState管理两个Picker的选中值，同样通过filter来处理第二个Picker的数据源即可。

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