reactjs - 有谁知道为什么这个 deleteItem 函数在Press 上不起作用？

Question

我不能让它deleteItem工作。一切看起来都很好，并且它记录了它正在接收道具，但点击后该项目没有被删除。任何帮助将不胜感激！

应用程序.js：

const App = () => {

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

  const addItems = (text) => {

    if (!text) {
      Alert.alert('Error', "How can I add something thats not there??", { text: 'ok' })
    } else {
      setItems(prevItems => {
        return [{ id: uuidv4(), name: text }, ...prevItems]

      })
    }
  }

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

    })
    console.log('working');
  }


  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 }) => {
            if (item.name === null) {
              return (
                <Prompt />
              )
            } else {
              return (
                <ListItem item={item.name} deleteItem={deleteItem} />
              )
            }
          }}
        />
      </ImageBackground>
    </View>
  )
};

这是我的ListItem组件。我传入deleteItem道具并在下面调用它：

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
// import Icon from 'react-native-vector-icons/dist/FontAwesome';

const ListItem = ({ item, deleteItem }) => {


    return (

        <View style={styles.listItem}>
            <View style={styles.listItemView}>
                <Text style={styles.itemText}>{item}</Text>
            </View>
            <View style={styles.button}>
                <TouchableOpacity onPress={() => deleteItem(item.id)}>
                    <Text>Remove</Text>
                </TouchableOpacity>
            </View>
        </View>
    )

};

标签： reactjsreact-native

Answer 1

<ListItem item={item.name} deleteItem={deleteItem} />

您将name属性传递为item. 您可能打算传递项目本身：

<ListItem item={item} deleteItem={deleteItem} />

请记住然后访问组件.name中的属性ListItem：

const ListItem = ({ item, deleteItem }) => {
    return (
        <View style={styles.listItem}>
            <View style={styles.listItemView}>
                <Text style={styles.itemText}>{item.name}</Text>
                                            {/*   ^^^^  */}
            </View>
            <View style={styles.button}>
                <TouchableOpacity onPress={() => deleteItem(item.id)}>
                    <Text>Remove</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
};

编辑：正如评论中提到的，这是一个带有 PropTypes 的组件，它将在控制台中为您的问题中的版本打印一个错误：

import PropTypes from 'prop-types'

const ListItem = // ...

ListItem.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string
    id: PropTypes.string
  }).isRequired,
  deleteItem: PropTypes.func.isRequired
}