Блог

Я пытаюсь сделать так , чтобы я мог добавить элемент «Пользователь» в плоский список с помощью модального, и в каждом пользователе я могу добавлять новые элементы с помощью другого модального. Мой целевой результат был бы:

Пользователь 1

• есть
• пить
• …….

Пользователь 2

• код
• есть
• ……

Мой вывод прямо сейчас показывает только пользователя, в то время как элементы для каждого пользователя невидимы, Ваша помощь и поддержка очень ценятся

Это мой код:

   const [isModalVisible_Users, setIsModalVisible_Users] = useState(false);
  const [isModalVisible_Attributes, setIsModalVisible_Attributes] = useState(false);

  const [usersInput, setUsersInput] = useState('');
  const [attributesInput, setAttributesInput] = useState('');

  const [users, setUsers] = useState([]);
  const [attributes, setAttributes] = useState([]);

  useEffect(() => {
    getUsersFromDevice();
  }, []);
  useEffect(() => {
    saveUsersToDevice(users,attributes);
  }, [users,attributes]);

  const ListUsers = ({users}) => {
    return <View style={styles.listItem}>
      <View style={{flex :1}}>
        <Text style={[styles.userText]}>
        {users?.userName}
        </Text>
      </View>
      <TouchableOpacity style={[styles.addAttributes]} onPress={() => changeModalVisibility_Attributes(true)}>
        <Icon name="add" size={15} color={'#fff'}/>
      </TouchableOpacity>
      <Modal
          transparent={true}
          animationType="fade"
          visible={isModalVisible_Attributes}
          onRequestClose={() => changeModalVisibility_Attributes(false)}
        >
              <AddAttributesModal
              changeModalVisibility={changeModalVisibility_Attributes}
              />
      </Modal>
      <FlatList
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ padding: 20 , paddingBottom: 100}}
      data={attributes}
      renderItem={({ item }) => <ListGrade attributes={item}/>}
      />
    </View>;
  };

  const ListGrade = ({attributes}) => {
    return <View style={styles.listItem}>
      <View style={{flex :1}}>
        <Text style={[styles.attributeText]}>
        {attributes?.attributesName}
        </Text>
      </View>
    </View>;
  };

  const AddUsersModal = () => {
    return <SafeAreaView style={styles.modal}>
    <View style={styles.modalWrapper}>
      <View style={styles.modalTitleWrapper}>
        <Text style={styles.modalTitle}>Add User</Text>
      </View>
      <View style={styles.typeMsgContainer}>
        <TextInput
          editable={true}
          style={styles.typeMsgBox}
          placeholder={'Add User...'}
          value={usersInput}
          onChangeText={(text) => setUsersInput(text)}
        />

        <TouchableOpacity style={styles.sendBtn} onPress={addUsers}>
          <View >
            <Icon name="add" size={30} color="white"/>
          </View>
        </TouchableOpacity>
      </View>
  </View>
  </SafeAreaView>;
  };

  const addUsers = () => {
    if (usersInput === ''){
      Alert.alert('Error', 'Please input todo');
    } else {
      const newUser = {
        id: Math.random(),
        userName: usersInput,
      };
      setUsers([...users,newUser]);
      setUsersInput('');
      changeModalVisibility_Users(false);
    }
  };

  const AddAttributesModal = () => {
    return <SafeAreaView style={styles.modal}>
    <View style={styles.modalWrapper}>
      <View style={styles.modalTitleWrapper}>
        <Text style={styles.modalTitle}>Add Attributes</Text>
      </View>
      <View style={styles.typeMsgContainer}>
        <TextInput
          editable={true}
          style={styles.typeMsgBox}
          placeholder={'Add Attributes...'}
          value={attributesInput}
          onChangeText={(text) => setAttributesInput(text)}
        />

        <TouchableOpacity style={styles.sendBtn} onPress={addAttributes}>
          <View >
            <Icon name="add" size={30} color="white"/>
          </View>
        </TouchableOpacity>
      </View>
  </View>
  </SafeAreaView>;
  };

  const addAttributes = () => {
    if (attributesInput === ''){
      Alert.alert('Error', 'Please input grade');
    } else {
      const newAttribute = {
        id: Math.random(),
        attributesName: attributesInput,
      };
      setGrades([...attributes,newAttribute]);
      setGradeInput('');
      changeModalVisibility_Attributes(false);
    }
  };

  return (
    <SafeAreaView style={{flex:1}}>
      <LinearGradient
                    colors={['#00BFFF', '#87CEFA', '#87CEEB' , '#ADD8E6']}
                    style={{flex:1}}
      >
      <View style={styles.subjectWrapper}>
        <View style={styles.taskTitle}>
          <Text style={styles.sectionTitle}>Subjects</Text>
          <TouchableOpacity onPress={() => changeModalVisibility_Users(true)} style={styles.ClearButton}>
            <Icon name="add" size={25} color="#0066ff"  />
          </TouchableOpacity>
          <Modal
                transparent={true}
                animationType="fade"
                visible={isModalVisible_Users}
                onRequestClose={() => changeModalVisibility_Users(false)}
            >
              <AddUserModal
              changeModalVisibility={changeModalVisibility_Users}
              />
          </Modal>
        </View>
        <FlatList
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ padding: 20 , paddingBottom: 100}}
          data={users}
          renderItem={({ item }) => <ListSubject user={item}/>}
        />
      </View>
      </LinearGradient>
    </SafeAreaView>
  );