两个关联DropDownPicker问题求助：选择Color后二级下拉框无数据

问题根源 #

你的代码存在三个核心问题导致子下拉框为空：

1. 状态更新异步导致判断失效：setSelected是异步操作，执行后立刻用selected === "Color"判断时，selected还是旧值，无法触发子选项更新。
2. 子选项格式不符合组件要求：DropDownPicker的items必须包含label和value字段，你生成的颜色选项只提供了id和value，缺少label。
3. 子组件属性配置错误：setItems属性传值错误，key属性使用了无效的状态值。

修复后的代码 #

const CarList = () => {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState('');
  const [fullData, setFullData] = useState([]);
  const [isLoading, setIsLoading] = useState(false); // 补全缺失的isLoading状态
  const [selected, setSelected] = useState("");
  const [open, setOpen] = useState(false);
  const [childOpen, setChildOpen] = useState(false);
  const [filterOption, setfilteroption] = useState([     
    {label: 'Model', value: 'model'},
    {label: 'Year', value: 'year'},
    {label: 'Color', value: 'color'},
  ]);
  const [value, setValue] = useState(null);
  const [childItem, setChilditem] = useState(null);
  const [childValue, setChildValue] = useState([]); 

  useEffect(() => {
    setIsLoading(true);  
    fetch(`https://myfakeapi.com/api/cars/?seed=1&page=1&results=20`)
      .then(response => response.json())
      .then(response => {
        setData(response.cars);
        setFullData(response.cars);
        setIsLoading(false);
      })
      .catch(err => {
        setIsLoading(false);
        console.error('数据加载失败:', err);
      });
  }, []);
  
  const changeSelectOptionHandler = (item) => {
    setSelected(item.label);
    // 直接用当前选中的item.label判断，避免异步状态更新问题
    if (item.label === "Color" && data.length > 0) {
      const colorData = [...new Set(data.map(val => val.car_color))];
      // 生成符合DropDownPicker要求的选项格式：包含label和value
      const colorOptions = colorData.map((val, index) => ({
        label: val,
        value: val,
        id: index
      }));
      setChildValue(colorOptions);
    } else {
      // 选择其他选项时清空子下拉框
      setChildValue([]);
      setChilditem(null);
    }
  };
    
  function renderHeader() {
    return (   
      <View style={{padding: 10, gap: 10}}>
        <TextInput
          placeholder="搜索..."
          value={query}
          onChangeText={setQuery}
          style={{borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 4}}
        />
        
        <View>
          <DropDownPicker 
            onSelectItem={changeSelectOptionHandler}
            open={open} 
            value={value}
            items={filterOption}
            setOpen={setOpen}
            setValue={setValue}
            setItems={setfilteroption}
            dropDownDirection="TOP"
            key="filter-picker" // 使用固定key
          />
        </View>

        {/* 只有选中Color时才显示子下拉框 */}
        {selected === "Color" && (
          <View>
            <DropDownPicker
              open={childOpen}
              items={childValue}
              value={childItem}
              setValue={setChilditem}
              setOpen={setChildOpen}
              setItems={setChildValue} // 修正setItems属性
              max={10}
              dropDownDirection="TOP"
              testID="picker-testid"
              key="color-picker" // 使用固定key
            />
          </View>
        )}
      </View>
    );
  }  

  return (
    <View style={{flex: 1}}>
      {renderHeader()}
      {isLoading ? (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text>加载中...</Text>
        </View>
      ) : (
        <FlatList
          data={data}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <View style={{padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee'}}>
              <Text>{item.car_model}</Text>
              <Text>颜色: {item.car_color}</Text>
              <Text>年份: {item.car_year}</Text>
            </View>
          )}
        />
      )}
    </View>   
  ); 
}

关键修复点说明 #

• 异步状态判断修正：直接使用item.label === "Color"替代selected === "Color"，绕过useState异步更新的问题。
• 选项格式修正：生成颜色选项时添加label字段，与value保持一致，符合DropDownPicker的要求。
• 组件属性修正：子下拉框的setItems改为setChildValue，key使用固定字符串确保组件渲染稳定。
• 优化用户体验：只有选中Color时才显示子下拉框，选择其他选项时清空子下拉框内容。

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