React Native 中的函數組件

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 道具的值來強制重新呈現列表。