React Native DropDownPicker出现重复key(undefined)错误求助

问题根源 #

你遇到的undefined重复key错误，核心原因有两个：

• 子下拉框的items格式错误：传给子DropDownPicker的childvalue是纯字符串数组（比如["Red", "Blue"]），但DropDownPicker要求每个item必须是包含label和value的对象，组件无法识别纯字符串，导致内部生成key时出现undefined。
• setState异步导致的逻辑错误：setSelected是异步操作，刚执行完setSelected(item.value)就用selected判断分支，此时selected还是旧值，导致childValue无法正确设置，可能出现空数组或旧数据，进一步触发key问题。

修复步骤 #

1. 转换子选项的格式 #

把从data中提取的纯字符串数组，转换成DropDownPicker需要的{label, value}结构：

const color = [...new Set(data.map(val => val.car_color))].map(c => ({label: c, value: c}));
const model = [...new Set(data.map(val => val.car_model))].map(m => ({label: m, value: m}));
const year = [...new Set(data.map(val => val.car_model_year))].map(y => ({label: y.toString(), value: y.toString()}));

（年份是数字，转成字符串避免类型匹配问题）

2. 修正异步状态判断逻辑 #

直接用当前选中的item.value判断分支，不用依赖还没更新的selected状态：

const changeSelectOptionHandler = (item) => {
  const color = [...new Set(data.map((val) => val.car_color))].map(c => ({label: c, value: c}));
  const model = [...new Set(data.map((val) => val.car_model))].map(m => ({label: m, value: m}));
  const year = [...new Set(data.map((val) => val.car_model_year))].map(y => ({label: y.toString(), value: y.toString()}));

  console.log("hi", item.value);
  setSelected(item.value);
  
  // 直接用当前选中的item.value判断，无需等待state更新
  if (item.value === "Color") {
    setChildValue(color);
  } else if (item.value === "Model") {
    setChildValue(model);
  } else if (item.value === "Year") {
    setChildValue(year);
  }
};

3. 初始化子选项状态（可选） #

给childvalue初始化为空对象数组，避免组件初始化时的潜在异常：

const [childvalue, setChildValue] = useState([]);

完整修改后的关键代码片段 #

const changeSelectOptionHandler = (item) => {
  const color = [...new Set(data.map((val) => val.car_color))].map(c => ({label: c, value: c}));
  const model = [...new Set(data.map((val) => val.car_model))].map(m => ({label: m, value: m}));
  const year = [...new Set(data.map((val) => val.car_model_year))].map(y => ({label: y.toString(), value: y.toString()}));

  console.log("hi", item.value);
  setSelected(item.value);
  
  if (item.value === "Color") {
    setChildValue(color);
  } else if (item.value === "Model") {
    setChildValue(model);
  } else if (item.value === "Year") {
    setChildValue(year);
  }
};

修改后，子DropDownPicker的每个item都有了唯一的value，组件能正确生成key，同时异步状态的逻辑错误也被修复，不会再出现重复key的警告。

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