Функциональные компоненты реагируют на нативные - PullRequest
Новая
       19

Функциональные компоненты реагируют на нативные

1 голос
/ 06 июня 2019

Я пытаюсь изменить вид 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».Если элемент будет нажат дважды, все элементы должны быть в нормальном состоянии

...