javascript - React-Native: State changes affecting view only on next action/rerender?

Question

I have a component where user can add items to their shopping cart, next to each item it shows either a plus icon (add) or the number of items of that type in the shopping cart (chosenProducts state variable), adding items works well but for some reason the item count only updates after the next item is added instead of inmediately "reacting" to an added item...

Summary: item count UI doesn't update after item is added, updates after the next item is added (whatever item that is.

const [ chosenProducts, setChosenProducts ] = useState([]);
const [ chosenProductIds, setChosenProductIds ] = useState([]);
const [ data, setData ] = useState([ {id:1}, {id:2}, {id:3}, {id:4}, {id:5}, {id:6} ]);

const showProductCount = (item) =>
    {
        let finds = _.filter(chosenProductIds, id => id == item.id);
        if(finds.length > 0)
        {
            return (<Text style={{ fontSize:16,color:'white' }}>{finds.length}</Text>);
        }
        else
        {
            return (<MaterialCommunityIcon name="plus" style={{ color:'white', fontSize:22 }}/>)
        }
    };

const addItem = (product) =>
    {
        var copy = [...chosenProducts];
        copy.push(product);
        var chosenProductId = _.map(chosenProducts, product => product.id);
        setChosenProducts(copy);
        setChosenProductIds(chosenProductId);
    }


<FlatList showsVerticallScrollIndicator={false} style={{ flex:1}} vertical={true} data={data} keyExtractor={item => item.id.toString()}
       renderItem={({ item, index }) => 
       (<TouchableOpacity onPress={ ()=>{ addItem(item) } } style={{ width:'15%',flexDirection:'column',alignItems:'center'}}>
       <View style={{  width:35,height:35,borderRadius:5,backgroundColor:'rgb(3,91,150)',flexDirection:'column',alignItems:'center',justifyContent:'center' }}>
           {showProductCount(item)}
       </View>
   </TouchableOpacity>)
       
        }
    />

Is it beacuse I'm using a function to return JSX instead of conditional rendering inside JSX itself?

Answer 1

等待大神答复