React Native SelectList保留选定状态

vcirk6k6 于 2023-11-21 发布在 React

关注(0)|答案(1)|浏览(135)

我正在使用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是否有一个内部状态，它保留了这些信息，如果有，我如何重置或禁用它？如果有一些其他的魔法在工作，暗示我，我会感激一些见解。谢谢！

react-native

来源：https://stackoverflow.com/questions/77483780/selectlist-retains-selected-state

1条答案

按热度按时间

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}}/>

型

赞(0）回复(0）举报 2023-11-21

我来回答

React Native SelectList保留选定状态

1条答案

相关问题

热门标签

最新问答