如何在ReactPicker中重新渲染FlatList以使用React钩子更改数据

Question

我正在尝试创建一个SmoothPicker像这样：

我正在使用react-native-smooth-picker，并且一切正常，除非我要改成“脚”。 当我更改为Feet时，我希望该列表将重新呈现并将数据更改为Feet参数，但这仅在滚动后才发生。有没有办法做到这一点？ 这是我的代码：

const HeightPicker = () => {
   const [isFeet, setIsFeet] = useState(false)
   const listRef = useRef(null)

   let metersHeights = []
   const feetHeights = new Set()
   for (i = 140; i <= 220; i++) {
       metersHeights.push(i)
       feetHeights.add(centimeterToFeet(i))
   }
   const [selected, setSelected] = useState(40)

   return <View
       style={{
           backgroundColor: 'rgb(92,76, 73)',
           paddingBottom: 20
       }} >
       <Toggle
           style={{
               alignSelf: 'flex-end',
               marginVertical: 20,
               marginEnd: 20
           }}
           textFirst="Feet"
           textSecond="Meters"
           onChange={(change) => {
               setIsFeet(change)
           }} />

       <SmoothPicker
           ref={listRef}
           onScrollToIndexFailed={() => { }}
           initialScrollToIndex={selected}
           keyExtractor={(value) => value.toString()}
           horizontal
           showsHorizontalScrollIndicator={false}
           magnet={true}
           bounces={true}
           extraData={isFeet}
           data={isFeet ? [...feetHeights] : metersHeights}
           onSelected={({ item, index }) => setSelected(index)}
           renderItem={({ item, index }) => (
               <Bubble selected={index === selected}>
                   {item}
               </Bubble>
           )}
       />
   </View>
}

Answer 1

您应该分开英尺和米（功能是生成英尺和米）。 使用useState设置数据并设置仪表为默认值 每次切换时都使用useEffect更改数据。 ...     useEffect（（）=> {        handleData（isFeet）    }，[isFeet]）;

const handletData =（isFeet）=> {       if（isFeet）{          setData（英尺）      }其他{         setData（米）      }   } .... 数据= {数据} ...