TextInput (onChangeText) の値を渡すことによって、useState() 配列を更新しようとしています。コードは正常に動作していますが、onPress (addBook 関数) を鳴らすたびに、現在のテキストではなく、配列内の以前のテキストを更新/追加しています。したがって、現在のテキストを追加するには、ボタンを 2 回クリックする必要があります。これにより、配列に重複した項目が作成されます。
私は非常にばかげた間違いをしているかもしれませんが、それを見つけることができません。誰でも助けることができますか?以下は私のコード全体です。
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;