Я все время получаю эту ошибку. TypeError: addItems не является функцией. (В 'addItems (текст)' addItems является экземпляром объекта)

Question

Это ошибка, которую я получаю каждый раз, когда пытаюсь добавить что-то в свой список.

TypeError: addItems не является функцией. (В 'addItems (text)', 'addItems' - это экземпляр объекта)

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

Вот мое приложение. js

import React, { useState } from 'react';
import { View, Text, StyleSheet, ImageBackground, FlatList } from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';
import { uuid } from 'uuidv4';




import Header from './Componets/Header';
import AddItem from './Componets/AddItem';
import background from './Images/sunrise-in-the-smoky-mountains.jpg';
import ListItem from './Componets/ListItem';



const App = () => {



  const [item, setItems] = useState([
    // {
    //   id: uuidv4(),
    //   name: ''
    // },
    {
      id: uuidv4(),
      name: "gym"
    },
    {
      id: uuidv4(),
      name: "study"
    }
  ]);

  const addItems = (text) => {
    setItems(prevItems => {
      return [{ id: uuidv4(), text }, ...prevItems]
    })
  }

  const deleteItem = (id) => {
    setItems(prevVal => {
      return prevVal.filter(item => item.id != id)
    })
  }



  return (
    <View style={styles.container}>
      <ImageBackground source={background} style={styles.image}>
        <Header
          title="Gotta get this done!" />
        <AddItem
          addItem={addItems}
        />
        <FlatList
          data={item}
          renderItem={({ item }) => (
            <ListItem item={item.name} deleteItem={deleteItem} />
          )}
        />

      </ImageBackground>
    </View>
  )
};



const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  }
})

export default App;

Здесь я вызываю функцию и получаю сообщение об ошибке.

import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Button } from 'react-native';



const AddItem = ( addItems ) => {

    const [text, setText] = useState("");

    const onChange = (inputVal) => setText(inputVal);



    return (
        <View style={styles.addItemView}>
            <TextInput
                style={styles.inputText}
                placeholder="Add item to list..."
                onChangeText={onChange}

                />
            <TouchableOpacity style={styles.button}>
                <Button title="Add Item" onPress={() => addItems(text)}  />

            </TouchableOpacity>
        </View>

);



};

const styles = StyleSheet.create({
    addItemView: {
        flex: 1,
        flexDirection: "row",
        alignItems: 'center'
    },
    inputText: {
        fontSize: 20,
        backgroundColor: "white",
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        width: 250,
    },
    button: {
        alignItems: "center",
        justifyContent: "center",
        height: 40,
        backgroundColor: "#bbc7ad",
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#99a191",
        marginLeft: 20,
    }
})

export default AddItem;

Answer 1

Вы передаете функцию addItems как опору в

<AddItem
   addItem={addItems}
 />

Когда вы передаете любую функцию или значение любому функциональному компоненту в React, вы можете получить к ним доступ только через реквизиты, поэтому для доступа к addItems вам необходимо получить доступ к этому функция из props

Вы можете сделать это следующими способами:

Метод 1

const AddItem = ( props ) => {

   // We are extracting addItem function from props 

    const {addItem} = props

    const [text, setText] = useState("");

    const onChange = (inputVal) => setText(inputVal);



    return (
        <View style={styles.addItemView}>
            <TextInput
                style={styles.inputText}
                placeholder="Add item to list..."
                onChangeText={onChange}

                />
            <TouchableOpacity style={styles.button}>
                <Button title="Add Item" onPress={() => addItem(text)}  />

            </TouchableOpacity>
        </View>

);



};

Метод 2:

const AddItem = ({addItem} ) => {
      .....
        return (
            <View style={styles.addItemView}>
              ......
                <TouchableOpacity style={styles.button}>
                    <Button title="Add Item" onPress={() => addItem(text)}  />

                </TouchableOpacity>
            </View>

    );



    };

Answer 2

Кажется, сейчас это работает. До сих пор неясно, почему использование деструктуризации в моей исходной версии не сработало. Пожалуйста, свяжитесь с нами, если вы можете помочь с этим. Спасибо!

const AddItem = (props) => {

    const [text, setText] = useState("");

    const onChange = inputVal => setText(inputVal);



    return (
        <View style={styles.addItemView}>
            <TextInput
                style={styles.inputText}
                placeholder="Add item to list..."
                onChangeText={onChange}

            />
            <TouchableOpacity style={styles.button}>
                <Button title="Add Item" onPress={() => props.addItem(text)} />

            </TouchableOpacity>
        </View>

    );



};