从反应中的另一个组件中删除列表

Question

当尝试在父子或兄弟组件中以“简单”方式（没有 redux 或上下文）在不同组件之间设置状态时，我对 props 的确切工作方式有点缺乏了解。

我已阅读文档，也许我只是在尝试自学反应/编码时理解这一点超级慢，但有人可以用“简单”的话解释以下内容：

• 在我的 parent.js 中，我拥有添加和删除文本并将其存储在列表中的所有逻辑
• 在我的 child.js 中，这是一个由 parent.js 创建的页面，作为列表的一部分，我希望能够删除整个列表项。现在这个逻辑是写在 parent.js 中的，所以我有点想从我的子组件中访问这个函数。

编辑 - 我包含了 2 个主要组件的代码： 编辑 2 - 返回“onRemove 不是函数”的测试代码：

Home.js

const Home = ({navigation, route}) => {

const [lists, setLists] = useState([])
const [isVisible, setVisibility] = useState(true)

    const addItemToLists = (item) => {
        lists.push(item)
        setLists([...lists])
        setVisibility(false)
    }
    
    **const removeItemFromLists = (index) => {
        lists.splice(index,1) 
        setLists([...lists])
        console.log("removed")
        return(
            <EditList test={test} onRemove={removeItemFromLists}/>
        )
    }**
    
    const updateItemFromLists = (index,item) => {
        lists[index] = item
        setLists([...lists])
    }

return(

            <View style={styles.homeContainer}>

                <View style={styles.homeContainer2}>
                    <TouchableOpacity onPress={()=>navigation.navigate("Edit", {saveChanges: addItemToLists})}>
                        <Ionicons name="add-circle" size={60} color="black"/>
                    </TouchableOpacity>
                </View>


                <View style={{alignItems: 'center'}}>
                {!isVisible ? null : <Text>Add List-item</Text> }
                </View>

                <FlatList 
                data={lists}
                renderItem={({item: {title}, index})=>{
                    return(
                        <Listbutton 
                        title={title} 
                        navigation={navigation}
                        onPress={()=>{navigation.navigate("List", {title})}}
                        onOptions={()=>{navigation.navigate(
                            "Edit",
                            {title, saveChanges:(item)=>updateItemFromLists(index,item)})}}
                        onDelete={()=> removeItemFromLists(index)}
                        />
                    )
                }}
                />
                    
            </View>
    )
}

EditList.js

export default function EditList ({navigation, route,**test, onRemove**}){
    const [title, setTitle] = useState(route.params.title || "")
    const [isValid, setValidity] = useState(true)
    


    return(

    <View style={styles.editContainer}>
        <View>
     
        <TextInput
                    autoFocus={true} 
                    underlineColorAndroid={"transparent"}
                    selectionColor={"transparent"}
                    value={title}
                    onChangeText={(text)=>
                        {setTitle(text)
                            setValidity(true)
                        }}
                        placeholder={"Add header"}
                        maxLength={25}
                        style={styles.todoEditTextInput}
                        /> 

            <View style={{alignSelf: "center"}}> 
                {!isValid && <Text style={{color:"red"}}>Add list</Text>}
            </View>

             <TouchableOpacity
            style={{alignSelf: "center"}} 
            onPress={()=>{
                if (title.length > 0) {
                    route.params.saveChanges({title}) 
                    navigation.dispatch(CommonActions.goBack())
                } else {
                setValidity(false)
                }
            }}>
                <Ionicons name="checkmark-circle" size={50} style={{paddingLeft: 10,}}/>
            </TouchableOpacity>

        **<TouchableOpacity onPress={() => onRemove(test)}>
                 <Ionicons name="trash" size={50} style={{paddingLeft: 10,}}/>
        </TouchableOpacity>**

Answer 1

所以你可以做的就是将你的 remove 函数作为一个 prop 传递给你的子组件，并在你想要执行它时调用它。

const ParentComponent = () => {

   const removeFromList = (someIdentifier) {
    // insert your list modification code here
   }

   return <ChildComponent someIdentifier={someIdentifier} onRemove={removeFromList} />

}

const ChildComponent = ({ someIdentifier, onRemove }) => (

 <TouchableOpacity onPress={() => onRemove(someIdentifier)} />  

)

我看到您正在使用索引，因此您可以将其作为您的标识符传递 - 但请注意，使用索引作为键是不好的做法，因为您不能保证它会引用列表中的相同项目（尤其是现在您正在以随机顺序删除项目）。