如何解决将映射循环内部的值分配给循环外部的变量
我有一个相当大的多步骤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对象后,我发现所有值均已正确分配,但该对象似乎仍未定义,因此该对象完全缺少单位值。我不太明白为什么这行不通。谢谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。