Question

我正在尝试通过按下ListItem来更改其视图。在我的屏幕上，这是正常的React组件，我具有功能性的List组件和selectedItemState（仅选择1或不选择任何项目）。在List中，几乎没有功能性的ListItem组件。问题在于缺少物品的重新渲染能力。

我已经按照React官方页面上的说明尝试过备忘录，但是没有结果。将组件更改为普通组件可获得相同的结果。

屏幕组件：

export default class myScreen extends Component {
    constructor () {
        super ()
        this.state = {
            data: [], // <-- there are my objects
            isDataEmpty: false,
            selectedItemId: ''
        }
    }

    // ... some code

    render () {
        return ( 
                <View style={styles.container}>
                    <List
                        itemList={this.state.data}
                        onItemPress={ /* go to next screen */}
                        onItemLongPress={id => {
                            this.setState({ selectedItemId: this.state.selectedItemId === id ? '' : id })
                        }}
                        selectedItemId={this.state.selectedItemId}
                    />
                </View>
        )
    }
}

列表组件：

const List = props => {
  return (
    <FlatList
      style={style.itemList}
      data={props.itemList}
      renderItem={info => (
        <ListItem
          item={info.item}
          selectedItemId={props.selectedItemId}
          onItemPress={id => props.onItemPress(id)}
          onItemLongPress={id => props.onItemLongPress(id)}
        />
      )}
    />
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId !== '' && (previous.selectedItemId === next.selectedItemId)
}

export default React.memo(List, areEqual)

列表项组件：

const ListItem = props => {
  return (
    <TouchableWithoutFeedback
      onPress={() => props.onItemPress(props.item.id)}
      onLongPress={() => {
        props.onItemLongPress(props.item.id)

      } }>
      <View style={style.listItem}>
          <Image resizeMode='cover' source={props.item.image} style={style.image} />
          <Text>{props.selectedItemId === props.item.id ? 'XXX' : props.item.name}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId && (next.selectedItemId === next.item.id)
}

export default React.memo(ListItem, areEqual)

在按下任何项目后，我希望它的名称更改为“ XXX”。如果将项目按两次，则所有项目应处于正常状态

Answer 1

只要项目本身没有更改，就不会重新渲染相应的列表项。您可以尝试通过更改extraData Flatlist属性的值来强制重新呈现列表。

React Native中的功能组件

1 个答案: