[英]How to change property of object in array javascript (React Native)
I have some problems about array in my project but don't know how to fix我的项目中有一些关于数组的问题,但不知道如何解决
My array look like:我的数组看起来像:
const [array, setArray] = useState([
{ id: 1, name: 'Luca', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
{ id: 2, name: 'Jin', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
])
< FlatList
data = { array }
renderItem = {({ item, index }) => {
return (
<View>
<FlatList
data={item.classes}
renderItem={({ item, index }) => {
return (
<View >
<TextInput
placeholder={''}
onChangeText={(text) => onChangeClassName(item, text)}
value={item.className}
/>
</View>
)
}}
></FlatList>
</View>
)
}}
></FlatList >
onChangeClassName onChangeClassName
onChangeClassName = (item, text) => {
const newArr = arr
for (let i = 0; i < newArr.length; i++) {
for (let z = 0; z < newArr[i].classes.length; z++) {
if (newArr[i].classes[z] === item ) {
newArr[i].classes[z].className = text
} }]
}
}
}
setArray([...arr])
}
So each student has name and classes, classes of each student is different and i change it by using textInput.所以每个学生都有名字和班级,每个学生的班级都是不同的,我通过使用 textInput 来改变它。 My problem is when i set className for one of students, both className in same position of students changed
我的问题是当我为其中一名学生设置类名时,同一个学生的 position 中的两个类名都发生了变化
ex: Clicked in classes[0] of Luca -> set text = '7A'例如:在 Luca 的 classes[0] 中单击 -> set text = '7A'
array will changed like this.数组会这样改变。
const [array, setArray] = useState([
{ id: 1, name: 'Luca', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
{ id: 2, name: 'Jin', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
])
Any one have solution?任何人有解决方案? Pls help me
请帮助我
Change your code to this it will work:将您的代码更改为此它将起作用:
import React, {useState} from 'react';
import {View,StyleSheet,Image,Button, FlatList, Text, TextInput} from 'react-native';
export default function App(){
const [array, setArray] = useState([
{ id: 1, name: 'Luca', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
{ id: 2, name: 'Jin', classes: [{ id: 1, className: '', teacherName: '' }, { id: 2, className: '', teacherName: '' }] },
])
const onChangeClassName = ( text,item1,itemID) => {
let newArr = [...array];
console.log("text is",text,item1,itemID);
for(var i=0;i<array.length;i++){
if(array[i].name == item1)
{
for(var j=0;j<array[i].classes.length;j++){
if(array[i].classes[j].id == itemID)
{
newArr[i].classes[j].className = text;
}
}
}
}
setArray(newArr);
console.log("array is",array);
}
return(
<View style={styles.div}>
<FlatList
data={array}
renderItem={({ item,index }) => {
let item1 = item.name
return(
<View>
<Text>{item.name}</Text>
<FlatList
data={item.classes}
renderItem={({ item }) =>
{ let itemID = item.id;
return(
<TextInput style={{ width:"85%",height: 30, borderColor: "black", borderBottomWidth: 2}}
placeholder="enter something"
onChangeText={(text) => onChangeClassName( text,item1,itemID)}
value={item.className}
/>
)
}}
keyExtractor={item => item.id}
/>
</View>
)
} }
keyExtractor={item => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
div: {
flex:1,
marginLeft:20,
backgroundColor: 'white',
marginTop:"30%"
},
});
After entering some input in TextInput在 TextInput 中输入一些输入后
My array looks like this after entering some values:输入一些值后,我的数组如下所示:
const [array, setArray] = useState([
{ id: 1, name: 'Luca', classes: [{ id: 1, className: '7A', teacherName: '' }, { id: 2, className: '7B', teacherName: '' }] },
{ id: 2, name: 'Jin', classes: [{ id: 1, className: '8A', teacherName: '' }, { id: 2, className: '8B', teacherName: '' }] },
])
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.