react-native-dropdown-select-list组件选中状态无法重置求助

这个问题的核心是react-native-dropdown-select-list组件自身维护了内部选中状态，你之前只通过setSelected回调把组件的选择同步到外部状态，但当你重置外部状态backend为空时，组件内部的状态并没有同步更新，所以会保留之前的选中值。

解决步骤 #

1. 绑定外部状态到组件的selected属性 #

组件提供了selected属性，用来强制指定当前选中值，把你的backend状态绑定到这个属性上，这样外部状态变化时，组件会自动同步更新选中状态。

2. 修改代码实现 #

调整后的代码如下：

import { useState, useEffect } from 'react';
import { useIsFocused } from '@react-navigation/native';
import SelectList from 'react-native-dropdown-select-list';

// 示例选项数据，替换为你的实际数据
const backendList = [
  { key: '1', value: 'Backend A' },
  { key: '2', value: 'Backend B' },
];

const YourComponent = () => {
  const [backend, setBackend] = useState('');
  const isFocused = useIsFocused();

  const init = () => {
    setBackend('');
    // 其他状态重置逻辑（已确认生效的部分保留）
  };

  useEffect(() => {
    if (isFocused) {
      init();
    }
  }, [isFocused]);

  return (
    <SelectList
      setSelected={(key) => setBackend(key)}
      data={backendList}
      placeholder="Select Backend"
      selected={backend} // 新增该行，绑定外部状态到组件
    />
  );
};

export default YourComponent;

3. 极端情况的兜底方案 #

如果上述方法仍未生效，可能是组件未触发重新渲染，可以给组件添加动态key，每次页面聚焦时更新key，强制组件重新初始化：

const [componentKey, setComponentKey] = useState(0);

const init = () => {
  setBackend('');
  setComponentKey(prev => prev + 1); // 更新key触发组件重建
  // 其他状态重置逻辑
};

// 给SelectList添加key属性
<SelectList
  key={componentKey}
  setSelected={(key) => setBackend(key)}
  data={backendList}
  placeholder="Select Backend"
  selected={backend}
/>

原理说明 #

通过selected属性将组件的选中状态与外部useState变量双向绑定：

• 用户选择选项时，setSelected回调更新外部状态
• 外部状态被重置为空时，selected属性会通知组件同步清空内部选中状态

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