javascript - React-Native：仅在下一个动作/重新渲染时影响视图的状态变化？

Question

我有一个组件，用户可以在其中将商品添加到他们的购物车中，在每个商品旁边显示一个加号图标（添加）或购物车中该类型的商品数量（chosenProducts 状态变量），添加商品效果很好但是由于某种原因，项目计数仅在添加下一个项目后更新，而不是立即“反应”到添加的项目......

摘要：添加项目后，项目计数 UI 不会更新，在添加下一个项目后更新（无论是什么项目。

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>)
       
        }
    />

是因为我使用一个函数来返回 JSX 而不是 JSX 本身内部的条件渲染吗？

标签： javascriptreactjsreact-native