useState 数组在创建重复项时未正确更新

Posted 2023-04-18

【中文标题】useState 数组在创建重复项时未正确更新

【英文标题】：useState array not updating correctly as it creates duplicate items

【发布时间】：2021-03-15 14:51:10

【问题描述】：

我正在尝试通过传递 TextInput (onChangeText) 的值来更新 useState() 数组。该代码工作正常，但是每当我点击 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;

【问题讨论】：

您的应用运行良好，我没有看到任何重复数据。尝试在 FlatList 中渲染，一切正常

我也没有看到数据重复

嗨@KetanRamteke 感谢您的评论。当我在 Flatlist 中渲染列表时，您是正确的。再次感谢。

【参考方案1】：

添加到列表后尝试清除之前的输入值。

  const addBook = () => 
    if (book) 
        setBookList([...bookList, book]);
        console.log(bookList);
        setBook("");
    
  ;

【参考方案2】：

这应该删除重复项：

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

您还可以将您的书单存储为一个集合而不是一个数组。