react native flatlist doesn't show updated value-CodePudding

I'm having a trouble in a flatlist that a button increments the value but doesn't show if I don't refresh or hit ctrl-s after incrementing value. Basically I cannot see the value change without pressing ctrl-s or going to another page and returning to the same page.

<FlatList 
    data={store}
    renderItem={({ item }) => {
      return (
          <View style={styles.itemCountView}>
            <TouchableOpacity style={styles.up}
              onPress={() => item.itemCount  }>
              <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
            </TouchableOpacity>
            <Text style={styles.itemCountText}>{item.itemCount}</Text>
          </View>
      )
    }}
  />

I can increment the value, if I save or go to another page and come back the value changes and i can see it but there must be a way to see it change.

Any help is appreciated

CodePudding user response：

As per the Documentation

extraData: https://reactnative.dev/docs/flatlist#extradata

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

CodePudding user response：

I think you'r not saving the changes you doing, basically you need to update the the store variable each time you increment an item, something like:

<FlatList 
    data={store}
    renderItem={({ item }) => {
      return (
          <View style={styles.itemCountView}>
            <TouchableOpacity style={styles.up}
              onPress={() =>  {
                     const newStoreData = [...store]
                     const itemIndex = newStoreData.findIndex(item)
                     const newItem = {...item,itemCount:item.itemCount   }
                     newStoreData[itemIndex] = newItem
                     setStoreData(newStoreData) // state or redux?
} 

}>
              <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
            </TouchableOpacity>
            <Text style={styles.itemCountText}>{item.itemCount}</Text>
          </View>
      )
    }}
  />

CodePudding user response：

You can try this approach here:

import {useState} from 'react';
import { Text, View, FlatList, TouchableOpacity } from 'react-native';


const store = [{
  itemCount: 1
},
{
  itemCount: 2

},
{
  itemCount: 3

}]

export default function App() {
  return (
    <View style={{
      flex: 1,
      padding: 140,
    }}>

    <FlatList 
      data={store}
      renderItem={({ item }) => ( <Item item={item}/> )}
    />    
    </View>

  );
}

 const Item = ({item})=> {
 const[count, setCount] = useState(item.itemCount);

     return (
         <View>
            <TouchableOpacity 
              style={{
                backgroundColor: 'black',
                padding: 10,
                margin: 10
              }}
              onPress={() => setCount(count 1)}>
            <Text style={{
              color: 'white'
            }}>{count}</Text>
            </TouchableOpacity>
          </View>
)
}

This will set the state for each item in the Flatlist.