Реактивная передача данных от ребенка к родителю просто работает в init

Question

У меня есть экран, который показывает несколько элементов в списке. мой элемент представляет собой компонент с именем CardItem, который имеет пару кнопок. Я реализовал как выше, но когда я запускаю свой проект, компонент передает мои желаемые данные, которые являются идентификатором родительскому методу в состоянии инициализации, но мне это нужно, когда пользователь нажимает на эту кнопку.

родитель:

addItemQuantity = (id) => {
  console.log('ADD item quantity with id: ', id);
};

render() {  
   return (
      <CardItem
         data={item}
         index={idx}
         key={item._id}
         addItemQuantityPress={this.addItemQuantity}
      />
   )

}

ребенок:

handleAddItemQuantity = (id) => {
  console.log('child component method');
  this.props.addItemQuantityPress(id);
}

render() {
    return (
        <View style={styles.cardItemOperation} >
            <TouchableHighlight
                underlayColor="#ffffff"
                onPress={this.handleAddItemQuantity(this.props.data._id)}
                style={styles.icon} >
            <Image
                style={styles.icon}
                resizeMode="contain"
                source={require('./images/icon-add.png')} />
            </TouchableHighlight>
       </View>
    )
}

Вывод, когда я запускаю проект:

метод дочернего компонента
ДОБАВИТЬ количество товара с идентификатором: 5a2660924713cf6c8d088424
метод дочернего компонента
ДОБАВИТЬ количество товара с идентификатором: 5a1a58cacd0b8a0febce9fd7
метод дочернего компонента
ДОБАВИТЬ количество товара с идентификатором: 5a1a5856cd0b8a0febce9fd5
метод дочернего компонента
ДОБАВИТЬ количество товара с идентификатором: 5a4c8e9d2ebcf507323e7b73
метод дочернего компонента
ДОБАВИТЬ количество товара с идентификатором: 5a1a5862cd0b8a0febce9fd6

Answer 1

Как вы там написали,

this.handleAddItemQuantity(this.props.data._id)

Будет выполнено немедленно во время рендера. Измените это на:

onPress={() => {this.handleAddItemQuantity(this.props.data._id)}}

Это должно делать свое дело