Question

我有一个FlatList，并且想要显示quantity之类的数字，例如product。因此，我为此使用了state。现在，当我按TouchableOpacity可以在控制台中将数量更改为1可以正常工作时，但在FlatList中看不到任何更改。

  constructor(props){
    super(props);
    this.state={
      quantity : 0,
    }

增加数量：

incrementCount=()=>{

    if(this.state.quantity != 10){
      console.log(this.state.quantity);
     this.setState((prevState, props) => ({
        quantity: this.state.quantity + 1,
      }));
    }
}

FlatList：

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

          <View>
            <Text>{item.title}</Text>

            <Text>{this.state.quantity}</Text>                            
            <TouchableOpacity onPress={this.incrementCount} activeOpacity={0.5}>
               <AntDesign name="plus" size={15}/>
            </TouchableOpacity>

          </View>
      }
    />

Answer 1

不推荐使用Listview，现在使用Flatlist代替它。

有关更多信息，请参考此官方文档react-native listview

Answer 2

这是javascript中前递增与后递增的常见问题（您可以在此处++someVariable Vs. someVariable++ in Javascript了解更多信息）

您可以通过简单地在setState之前增加变量来解决此问题：

const quantity = this.state.quantity + 1;
this.setState({ quantity }) // this is ES6 syntax

无论如何，您不应使用 ListView ，因为它已被弃用。（https://facebook.github.io/react-native/docs/listview.html）还有其他组件：

FlatList（https://facebook.github.io/react-native/docs/flatlist）
SectionList（https://facebook.github.io/react-native/docs/sectionlist）
VirtualizedList（https://facebook.github.io/react-native/docs/virtualizedlist）

如何在FlatList中使用状态？

2 个答案: