React Native动态添加表单时如何清空Dropdown Picker已选值

问题根因 #

• 所有表单的下拉选择器都共用了全局的open、category、subCategory状态变量，任意一个下拉的操作都会同步修改所有表单的下拉状态，导致修改form2下拉时form1的值同步变更。
• 分类、子分类变更后只修改了临时数组list，没有调用setAdviceList更新状态，视图不会同步变更，新增表单时也无法清空旧的选中值。

解决方案 #

1. 替换全局共用状态 #

删除原来全局定义的open、open1、category、subCategory、description相关状态，替换为记录当前打开下拉索引的状态：

// 分类下拉当前打开的索引，-1代表未打开
const [currentOpenCatIndex, setCurrentOpenCatIndex] = useState(-1);
// 子分类下拉当前打开的索引，-1代表未打开
const [currentOpenSubIndex, setCurrentOpenSubIndex] = useState(-1);

2. 修改下拉选择器绑定逻辑 #

所有下拉的value、open属性都绑定到当前遍历的advice项，不再使用全局状态：

分类下拉

<DropDownPicker
  defaultNull
  placeholder="Select a Category"
  open={currentOpenCatIndex === i}
  value={adviceList[i].category}
  items={items}
  searchable={true}
  setOpen={(isOpen) => setCurrentOpenCatIndex(isOpen ? i : -1)}
  setItems={setItems}
  listMode="MODAL"
  modalProps={{ animationType: "fade", width: "50%", height: "100%" }}
  modalContentContainerStyle={{
    backgroundColor: "#fff",
    width: "100%",
    height: "50%",
  }}
  onChangeValue={ (value) => onCategoryChange(value, i)}
/>

子分类下拉

<DropDownPicker
  defaultNull
  placeholder="Select a Sub Category"
  open={currentOpenSubIndex === i}
  value={adviceList[i].subCategory}
  items={data}
  searchable={true}
  setOpen={(isOpen) => setCurrentOpenSubIndex(isOpen ? i : -1)}
  listMode="MODAL"
  modalProps={{ animationType: "fade", width: "50%", height: "100%" }}
  modalContentContainerStyle={{
    backgroundColor: "#fff",
    width: "100%",
    height: "50%",
  }}
  onChangeValue={ (value) => onSubCategoryChange(value, i)}
/>

描述输入框（可选优化）

绑定value到对应advice项，删除全局setDescription调用：

<TextInput
  style={styles.textArea}
  placeholder="Enter Advice here"
  placeholderTextColor="grey"
  maxLength={300}
  multiline={true}
  value={adviceList[i].description}
  onChangeText={ (value) => onDescriptionChange(value, i)}
/>

3. 优化变更回调逻辑 #

每次修改分类、子分类后都触发状态更新：

const onCategoryChange = (value, i) => {
  const list = [...adviceList];
  list[i].category = value;
  // 切换分类后清空对应子分类，不需要可删除
  list[i].subCategory = "";
  setAdviceList(list);
};

const onSubCategoryChange = (value, i) => {
  const list = [...adviceList];
  list[i].subCategory = value;
  setAdviceList(list);
};

const onDescriptionChange = (value, i) => {
  const list = [...adviceList];
  list[i].description = value;
  setAdviceList(list);
};

4. 简化新增逻辑 #

不需要手动重置全局变量，新增的空对象会自动清空下拉值：

const addAdvice = () => {
  setAdviceList([...adviceList, { category: "", subCategory: "", description: "" }]);
};

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