Как я могу установить данные в состоянии в FlatList? - PullRequest
Новая
       8

Как я могу установить данные в состоянии в FlatList?

0 голосов
/ 26 апреля 2019

Я хочу сохранить идентификатор продукта (item.id) в состоянии, подобном productId.

Мне нужен идентификатор продукта для добавления товара в корзину.

Когда я нажимаю TouchableOpacity, работает нормально, но productId всегда равно 4.

У меня есть три пункта.id последнего элемента - 4, а первого элемента - 2.

Когда я нажимаю TouchableOpacity для продукта 1, идентификатор равен 4, но должен быть 2.

Я вижу, что идентификаторыОК Когда я печатаю идентификаторы в listView. 

  <FlatList
     data={this.state.dataSource}
     renderItem={({item}) =>

     <View>
     <View>

     <Text>{item.title} - {item.type}</Text>
     <Text>{item.id}</Text>

     <TouchableOpacity onPress={this.decrementCount,()=>this.setState({productId:item.id})}>

     <AntDesign name="minus" size={15} style={{color:'#fff'}}/>

     </TouchableOpacity>


     <TouchableOpacity onPress={this.incrementCount} activeOpacity={0.5}>
     <AntDesign name="plus" size={15} style={{color:'#fff'}}/>

     </TouchableOpacity>

     </View>
     </View>

     }
     />

1 Ответ

0 голосов
/ 26 апреля 2019

Я думаю, что эта строка - ваша проблема: 

<TouchableOpacity onPress={this.decrementCount,()=>this.setState({productId:item.id})}>

Прежде всего, вы должны определить свою функцию рендеринга в своем классе, и вы должны определить свою функцию onPress отдельно от нее. Например: 

class MyClass extends React.Component {

  handlePress = (item) => {
    this.decrementCount()
    this.setState({productId: item.id})
  }

  renderItem = ({item, index}) => {
    return (...code from above, but using this.handlePress rather than your onPress function as currently defined)
  }

  render() {
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    )
  }
}

Я думаю, что настоящая причина, по которой он сейчас не работает, заключается в том, что вы пытаетесь вызвать this.setState в качестве обратного вызова в вашей функции onPress. Это, вероятно, будет работать как есть, если вы изменили свой текущий onPress с: onPress={this.decrementCount,()=>this.setState({productId:item.id})} в onPress={() => this.setState({productId:item.id}, this.decrementCount)} как я вполне уверен, вы можете иметь функцию, вызываемую в качестве обратного вызова из this.setState.

Надеюсь, это поможет!

...