React-native flatlist 在 isLoading 上的组件之间共享道具

Posted 2023-03-13

【中文标题】React-native flatlist 在 isLoading 上的组件之间共享道具

【英文标题】：React-native flatlist is sharing props between components on isLoading

【发布时间】：2020-09-22 23:25:08

【问题描述】：

我目前正在使用 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;

【参考方案1】：

当你调用props.onItemSelected(_item)时，将发送的item保存在状态（例如selectedItem）和向下传递isLoading到SwipableItem时，而不是

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

你可以拥有

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