React Native SelectList保留选定状态

vcirk6k6  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(134)

我正在使用npm package react-native-dropdown-select-list来创建一个对象。选择工作正常,并设置了相应的状态变量:setSelected={(key)=> setBackend(key)}.我遇到的问题是,由于某种原因,这个状态/选择总是保留的。如果用户导航离开这个页面,然后通过bottomtabnavigation,back按钮或其他方式有机地返回,总是显示先前的选择。
我在这个页面上使用了一个焦点效果,以确保当用户返回时,所有的状态都被重新初始化为默认值,例如setBackend(“),我通过console.log确认它确实适用于所有使用中的“其他”状态变量。相关代码如下:

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

init() {
  setBackend('');
  // reset all other state variables as well / these working
}

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

return (
<SelectList setSelected={ (key) => setBackend(key)} data={backendList} placeholder="Select Backend"/>
)

字符串
然而,正如前面提到的,尽管所有状态变量都被重置了,但前面的选择仍然显示为选中“”!这个API是否有一个内部状态,它保留了这些信息,如果有,我如何重置或禁用它?如果有一些其他的魔法在工作,暗示我,我会感激一些见解。谢谢!

svmlkihl

svmlkihl1#

如果有人看到这篇文章,并面临着类似的问题,问题不是SelectList插件API或状态变量以某种方式保留状态,尽管被重置。问题可能与导航在我的情况下。底部标签导航器阻止页面重新呈现以提高性能。有效的解决方案是使用以下选项配置底部标签导航器屏幕:

unmountOnBlur={true} 
options={{unmountOnBlur: true}}

字符串
在这之后重新访问页面显示还没有选择任何东西。有趣的是,我不再需要手表isFocused,因为堆栈被有效地重置。
使用前:

<Tab.Screen name={homeScreen} component={Home_Screen}/>
<Tab.Screen name={confScreen} component={Conf_Screen}/>
<Tab.Screen name={settingsScreen} component={Settings_Screen}/>
<Tab.Screen name={storageScreen} component={Storage_Screen}/>


之后:

<Tab.Screen name={homeScreen} component={Home_Screen} unmountOnBlur={true} options={{unmountOnBlur: true}}/>
<Tab.Screen name={confScreen} component={Conf_Screen} unmountOnBlur={true} options={{unmountOnBlur: true}}/>
<Tab.Screen name={settingsScreen} component={Settings_Screen} unmountOnBlur={true} options={{unmountOnBlur: true}}/>
<Tab.Screen name={storageScreen} component={Storage_Screen} unmountOnBlur={true} options={{unmountOnBlur: true}}/>

相关问题