Question

我想以item.id之类的状态保存产品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获得一个称为回调的函数。

希望这会有所帮助！

如何在FlatList的状态下设置数据？

1 个答案: