Массив useState не обновляется правильно, так как он создает повторяющиеся элементы

Я пытаюсь обновить массив useState (), передав значение TextInput (onChangeText). Код работает нормально, однако всякий раз, когда я нажимаю onPress (функция addBook), он обновляет / добавляет предыдущий текст в массив, а не текущий. Итак, чтобы добавить текущий текст, мне нужно дважды нажать кнопку, что создает дублирующие элементы в моем массиве.

Я делаю очень крутые мисатке, но не могу его найти. Может ли кто-нибудь помочь. Ниже весь мой код.

import React, { useState } from "react";
import { TextInput, View, Dimensions, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";

const screenHeight = Math.round(Dimensions.get("window").height);

const AddBookName = ({ hidePressed }) => {
  const [book, setBook] = useState();
  const [bookList, setBookList] = useState(["no name"]);

  const addBook = () => {
    setBookList([...bookList, book]);
    console.log(bookList);
  };

  return (
    <View style={{ flexDirection: "row" }}>
      <View style={{ flex: 1 }}>
        <TextInput
          style={{
            fontSize: 20,
            paddingVertical: 10,
            backgroundColor: "#ececec",
            paddingLeft: 10,
          }}
          placeholder="Enter the Book Name"
          placeholderTextColor="grey"
          // value={book}
          onChangeText={(text) => setBook(text)}
          type="text"
        ></TextInput>
      </View>

      <TouchableOpacity
        style={{
          flex: 0.15,
          backgroundColor: "green",
          alignItems: "center",
          justifyContent: "center",
        }}
        onPress={() => addBook()} 
      >
        <View>
          <MaterialCommunityIcons name="check" size={24} color="white" />
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          flex: 0.15,
          backgroundColor: "red",
          alignItems: "center",
          justifyContent: "center",
        }}
        onPress={hidePressed}
      >
        <View>
          <Entypo name="cross" size={24} color="white" />
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default AddBookName;

введите описание изображения здесь


react-native expo use-state textinput onpress
person Akhil Prasad Godiyal    schedule 03.12.2020    source источник
comment
ваше приложение работает нормально, я не вижу дублирования данных. Попробуйте отрендерить его в FlatList, все работает отлично   -  person Ketan Ramteke    schedule 03.12.2020
comment
Я тоже не вижу дублирования данных   -  person sheriff_paul    schedule 03.12.2020
comment
Привет @KetanRamteke Спасибо за комментарий. Вы правы, когда я визуализирую список в Flatlist, он работает нормально. Спасибо еще раз.   -  person Akhil Prasad Godiyal    schedule 04.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте очистить предыдущее входное значение после добавления в список.

  const addBook = () => {
    if (book) {
        setBookList([...bookList, book]);
        console.log(bookList);
        setBook("");
    }
  };
person Rajitha Udayanga    schedule 03.12.2020

arrow_upward
0
arrow_downward

Это должно удалить дубликаты:

const addBook = () => {
  setBookList(Array.from(new Set([...bookList, book])));
  console.log(bookList);
};

Вы также можете сохранить свой список книг в виде набора, а не массива.

person soloko    schedule 03.12.2020