将映射循环内部的值分配给循环外部的变量

Question

我有一个相当大的多步骤React表单，用于将成分输入到配方中。该表单足够大，可以为输入字段创建一个单独的组件，以便可以重复使用它，而不必为表单中的每个步骤使用三倍的代码行。该组件的代码如下

export default function IngredientInput({ ingredients, ingredientSet, flavor, toggle, setToggle }) {
var unitValues = [
    {
        title: 'tbsp',
        value: 'tbsp'
    },
    {
        title: 'tsp',
        value: 'tsp'
    },
    {
        title: 'cup',
        value: 'cup'
    }
];

return (
    <View>
        <View style={{ flexDirection: 'row'}}>
            <TextInput
                style={styles.input}
                maxLength={30}
                placeholder={flavor}
                onChangeText={(text) => {
                    Object.assign(ingredientSet, {item: text});
                }}
            />
            <TextInput
                style={styles.inputNumeric}
                maxLength={4}
                placeholder='0'
                onChangeText={(num) => {
                    Object.assign(ingredientSet, {amount: num});
                }}
            />       
            <Modal 
                visible={toggle} 
                transparent={true} 
                animated={'slide'} 
                onRequestClose={() => console.log('close was requested')}
            >
                <View style={{ 
                    margin: 20, 
                    padding: 20,
                    bottom: 20,
                    left: 20,
                    right: 20,
                    alignItems: 'center',
                    position: 'absolute'
                }}>
                    <Text style={{ fontWeight: 'bold', marginBottom: 10}}>Select the unit type</Text>
                    { unitValues.map((value, index) => {
                        return (
                            <TouchableHighlight 
                                key={index}
                                style={{ paddingTop: 4, paddingBottom: 4, }}
                                onPress={() => {
                                    Object.assign(ingredientSet, {unit: value.value});
                                    setToggle(!toggle);
                                }}
                            >
                                <Text>{value.title}</Text>
                            </TouchableHighlight>
                        )
                    })}
                </View>
            </Modal>
            <TouchableOpacity 
                style={styles.unitButton}
                onPress={() => {
                    setToggle(!toggle)
                    Object.assign(ingredientSet, {flavor: flavor});
                    console.log(ingredientSet);
                    ingredients.push(ingredientSet);
                }} 
                title={"Unit"}
            >
                <Text style={styles.buttonText}>Unit</Text>
            </TouchableOpacity>
        </View>
    </View>
)
}

除了将{unit：value.value}分配给unitValues.map循环内的IngredientSet对象外，其他所有操作均有效。在控制台上记录了IngredientSet对象后，我发现所有值均已正确分配，但该对象似乎仍未定义，因此该对象完全缺少单位值。我不太明白为什么这行不通。谢谢您的阅读。