Question

我目前正在使用flatlist在react-native中列出项目列表，我面临的问题是它在列表中所有项目实例之间共享我的加载道具。这意味着，如果我单击一项，则所有项目均显示正在加载。我已经尝试了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）时，将发送的项目保存为状态（例如selectedItem），并且将isLoading传递给SwipableItem而不是

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

您可以拥有

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

React-native平面列表在isLoading上的组件之间共享道具

1 个答案: