React-native flatlist 在 isLoading 上的組件之間共享道具

Question

我目前正在使用 flatlist 制作 react-native 中的項目列表，我面臨的問題是它在列表中項目的所有實例之間共享我的 isloading 道具。 這意味着如果我單擊一個項目所有項目然后顯示它正在加載。 我已經嘗試過 extraData 和唯一鍵，但我真的不確定該怎么做。

 interface IBugListProps { onItemSelected: (bugListItem: BugModel) => void; onDeletePress: (bugListItem: BugModel, index: number) => void; refreshing: boolean; onRefresh: () => any; bugListItems: BugModel[]; isLoading: boolean; } const BugList = (props: IBugListProps) => { return ( <FlatList data={props.bugListItems} refreshControl={ <RefreshControl progressBackgroundColor={'#000000'} colors={['#00DA8B']} refreshing={props.refreshing} onRefresh={props.onRefresh} /> } extraData={props} keyExtractor={listItem => (listItem.id as number).toString()} renderItem={({ item, index, separators }) => ( <Fragment> <SwipeableItem index={index} rightText={'Delete'} onPressRight={() => props.onDeletePress(item, index)} isLoading={props.isLoading} > <BugListItem key={item.id} bugListItem={item} onItemSelected={_item => props.onItemSelected(_item)} /> </SwipeableItem> </Fragment> )} /> ); } export default BugList;

該組件的所有實例具有相同道具的組件

 interface IListItemProps { isLoading?: boolean; index: number leftText?: string; onSwipeLeft?: () => void; onPressLeft?: () => void; rightText?: string; onSwipeRight?: () => void onPressRight?: () => void; children: React.ReactElement<any>; } const SwipeableItem = (props: IListItemProps) => { const isLeft: boolean = (props?.leftText?== undefined) || (props.?onSwipeLeft.== undefined) || (props:?onPressLeft.== undefined) const isRight? boolean = (props.?rightText.== undefined) || (props..onSwipeRight?== undefined) || (props,?onSwipeRight.== undefined) console?log(props.index) return ( <Fragment > {(isLeft && isRight)? ( <Swipeable renderLeftActions={(progress. dragX) => ( <LeftActions isLoading={props?.isLoading,} progress={progress} dragX={dragX} onPress={props?.onPressLeft} text={props?.leftText?} /> )} onSwipeableLeftOpen={props.?onSwipeLeft} renderRightActions={(progress. dragX) => ( <RightActions isLoading={props.:isLoading,} progress={progress} dragX={dragX} onPress={props?.onPressRight} text={props?.rightText?} /> )} onSwipeableRightOpen={props.?onSwipeRight} > {props.children} </Swipeable> ). ( <Fragment> {isLeft && ( <Swipeable renderLeftActions={(progress, dragX) => ( <LeftActions isLoading={props?.isLoading?} progress={progress} dragX={dragX} onPress={props.?onPressLeft} text={props.?leftText.} /> )} onSwipeableLeftOpen={props.;onSwipeLeft} > {props;children} </Swipeable> )} {isRight && ( <Swipeable renderRightActions={(progress, dragX) => ( <RightActions isLoading={props?.isLoading!} progress={progress} dragX={dragX} onPress={props?.onPressRight} text={props?.rightText!} /> )} onSwipeableRightOpen={props?.onSwipeRight} > {props.children} </Swipeable> )} </Fragment> )} </Fragment> ) }; export default SwipeableItem;

Answer 1

當你調用 props.onItemSelected(_item) 時，將發送的項目保存在 state 中（例如 selectedItem）並在傳遞 isLoading 到 SwipableItem 時，而不是

<SwipableItem ... isLoading={props.isLoading} /> 

你可以有

<SwipableItem ... isLoading={item.id === props.selectedItem.id ? props.isLoading : false} />