Как изменить свойство объекта в массиве 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 в одной и той же позиции студентов изменились

ex: Кликнул в классах [0] Luca -> 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: '' }] },
])

Надеюсь, это поможет!