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：在Luca的class [0]中单击->设置文本='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: '' }] },
])

希望这会有所帮助！

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

1 个答案: