React-native flatlist 在 isLoading 上的组件之间共享道具
React-native flatlist is sharing props between components on isLoading
我目前正在使用 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;
当您调用 props.onItemSelected(_item) 时,将已发送的项目保存在状态中(例如 selectedItem),并在将 isLoading 传递给 SwipableItem 时,而不是
<SwipableItem ... isLoading={props.isLoading} />
你可以
<SwipableItem ... isLoading={item.id === props.selectedItem.id ? props.isLoading : false} />
我目前正在使用 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;
当您调用 props.onItemSelected(_item) 时,将已发送的项目保存在状态中(例如 selectedItem),并在将 isLoading 传递给 SwipableItem 时,而不是
<SwipableItem ... isLoading={props.isLoading} />
你可以
<SwipableItem ... isLoading={item.id === props.selectedItem.id ? props.isLoading : false} />