如何在 FlatList 中设置状态数据？

Question

我想将产品 ID (item.id) 保存为 productId 这样的状态。

我需要产品 ID 才能将产品添加到购物车。

当我点击 TouchableOpacity 工作正常但 productId 始终为 4 时。

我有三个项目。最后一项的id 是 4，第一项是 2。

当我点击产品 1 的 TouchableOpacity 时，id 是 4 但应该是 2。

当我在 listView 中打印 ID 时，我看到 ID 正常。

  <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>

     }
     />

Answer 1

我认为这行是你的问题：

<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}
      />
    )
  }
}

我认为它现在不适合你的真正原因是你试图在你的 onPress 函数中调用 this.setState 作为回调。如果您将当前的 onPress 从以下位置更改，它可能会按原样工作： onPress={this.decrementCount,()=>this.setState({productId:item.id})} 到 onPress={() => this.setState({productId:item.id}, this.decrementCount)} 因为我很确定你可以从 this.setState 中调用一个回调函数。

希望这会有所帮助！