Невозможно обновить объект массива новыми данными Textinput в React Native - PullRequest
0 голосов
/ 06 мая 2020

Я новичок в использовании собственных хуков. Я пытаюсь обновить свой объект массива независимо от того, что пользователь вводит в поле TextInput. Как я могу это сделать ??

где мое состояние и мой объект массива папок

    const [folder, emptyFolder] = useState([]);

      Array [
  Object {
    "id": "0.017859040901406997",
    "value": "Bar",
  },
]

где мой TextInput. {itemData.item.value} - это то место, где я показываю имя «Бар». Я хочу обновить свой массив новым именем TextInput. Это имя то, что вводит пользователь. Заранее спасибо.

    const handlePress = () => {
       ... { map the array[value] an display the new array[value]} ???
      };

<FlatList
    style={{ margin: 2 }}
    data={folderToDisplay}
    //keyExtractor={(item) => item.id}
    numColumns={4}
    renderItem={(itemData) => {
      return (
        <View style={styles.homeRowFolder}>
          <View style={styles.iconAndText}>
              <Text style={styles.textdisplay}>
                {itemData.item.value}
              </Text>
          </View>
        </View>
      );
    }}
  />

1 Ответ

1 голос
/ 07 мая 2020

Я не уверен, что такое itemData, я полагаю, это состояние папки, в этом случае я бы сделал что-то вроде этого.

UPDATE

Используйте setFolder для обновления ваших объектов Array:

  const folderContent = [
    {id: '0.017859040901406997', value: 'Bar'},
    {id: '0.017859040901406998', value: 'Mall'},
    {id: '0.017859040901406999', value: '...'},
    {id: '0.017859040901407000', value: '...'},
  ]
  const [folder, setFolder] = useState(folderContent)

Создайте копию папки в функции handlePress, используя новый текст, поступающий из TextInput и индекса массива, и используйте setFolder, чтобы сохранить новый массив:

const handlePress = (text, index) => {
    const newFolder = [...folder]
    newFolder[index].value = text

    setFolder(newFolder)
  }

Передайте вашу папку как данные в ваш FlatList. В TextInput вызовите handlePress, когда onChangeText с новым текстом и индексом массива:

        <FlatList
          data={folder}
          keyExtractor={item => item.id}
          renderItem={({item, index}) => {
           return (
              <TextInput onChangeText={text => handlePress(text, index)}>
                {item.value}
              </TextInput>
            )
          }}
        />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...