Как я могу использовать состояние в FlatList?

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

Это распространенная проблема, связанная с перед инкрементом против постинкремента в javascript (подробнее об этом можно прочитать здесь: ++ someVariable Vs. someVariable ++ в 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)

Answer 2

Listview устарел, теперь используйте Flatlist вместо этого.

Для получения дополнительной информации обратитесь к этому официальному документу response-native listview