如何在 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})}>

首先，您应该在 class 上定义您的渲染函数，并且您应该单独定义您的 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 中设置状态中的数据？

How can I set data in a state in FlatList?

react-native

react-native-flatlist