0

Есть FlatList и его элементы представлены в массиве. Нужно, чтобы по заполнению формы эти данные добавлялись в массив и отображались в списке. Но почему-то при добавлении объекта происходит не то, что нужно: добавляется только один элемент (размер массива не может увеличиться больше чем на 3 элемента), и список не обновляется. Как это можно исправить? В приведённом ниже примере кода данные из формы выдаются из объекта во внешнем классе Forms.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { Forms } from '../components/Forms';

export default function HomeScreen() {

  var listElements = [
    { id : "0", text : "Object 1"},
    { id : "1", text : "Object 2"},
  ]

  return (
    <View style={styles.container}>
        <FlatList
          data = {listElements}
          renderItem={({item}) => 
            <Text>{item.text}<Text/>
          }
          keyExtractor={item => item.id}
        />
        <Button
          title="Add element"
          onPress={() => {
            var forms = new Forms();
            listElements.push({id: forms.data.id, text: forms.data.text});
            // DEBUG
            for(let i = 0; i < reminders.length; i++) {
              console.log(listElements[i].text);
            }
            console.log(listElements.length);        
          }}
        <
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

1 ответ 1

0

Вам нужно менять состояние, сделать это можно: 1) Либо используя хуки (https://ru.reactjs.org/docs/hooks-state.html) 2) либо преобразуйте функцию HomeScreen в класс, и используйте state. Из ретурна изменять(мутировать) данные функции вы не можете.

Дополнительно:

<Button
      title="Add element"
      onPress={() => {
        var forms = new Forms();
        listElements.push({id: forms.data.id, text: forms.data.text});
        // DEBUG
        for(let i = 0; i < reminders.length; i++) {
          console.log(listElements[i].text);
        }
        console.log(listElements.length);        
      }}
    <

вычисления не применяйте в этом ретурне, в данном случае ретурн выступает как рендер. Лучше сделайте onPress={() => calculation()} , и до ретурна эти вычисления.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.