如何更改数组javascript中对象的属性（React Native）

Question

我的项目中有一些关于数组的问题，但不知道如何解决

我的数组看起来像：

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 = (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])
    }

所以每个学生都有姓名和班级，每个学生的班级都不同，我使用 textInput 更改它。我的问题是当我为其中一个学生设置 className 时，两个学生相同位置的 className 都发生了变化

例如：在 Luca 的 classes[0] 中点击 -> set text = '7A'

数组会这样改变。

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: '' }] },
])

任何人有解决方案？请帮助我

Answer 1

把你的代码改成这样就可以了：

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%"
  },


});

在 TextInput 中输入一些内容后

输入一些值后我的数组如下所示：

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: '' }] },
])

希望这会有所帮助！