从firebase删除数据时遇到问题-React、Javascript、firebase

我很难通过用户输入从firebase中删除数据。我能够使用以下路径成功地将数据推送到firebase：

const dbRef = firebase.database().ref('users/' + userName + "/" + category);

我尝试从同一路径中删除它，并使用：

removeItem(itemToRemove) {
    const userName = this.props.userName;        
    console.log(itemToRemove);
    const database = firebase.database().ref('users/' + userName + "/" + category );
    database.child(itemToRemove).remove();
}

props.removietem（props.data.key）}>Remove项

我尝试过的都不成功；现在我得到了这个错误：uncaughttypeerror:props.removietem不是一个函数。我的直觉是，我不知何故丢失了用于处理数据库中项目的firebase密钥，但我似乎不知道如何集成它们或使用它们来删除

以下是firebase的组织方式：

有什么建议吗？？如果有任何建议，我将不胜感激！谢谢

下面是我正在使用的组件的其余代码（如果您想查看）：

import React from 'react';
import ReactDOM from 'react-dom';

class AddClothing extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            text: "",
            initialItems: []
        };

        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleAddItem = this.handleAddItem.bind(this);
        this.removeItem = this.removeItem.bind(this);
        this.getStoredData = this.getStoredData.bind(this);
        this.category = "clothing";
    }
    handleTextChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    handleAddItem(event) {
        event.preventDefault();
        //issue an ID number using the date
        const newItem = {
            id: Date.now(),
            text: this.state.text,
            done: false
        };

        const userName = this.props.userName;
        const category = "clothing"
        const database = firebase.database().ref('users/' + userName + "/" + category);
        database.push(newItem.text);

        this.setState((prevState) => ({
            items: prevState.items.concat(newItem),
            text: ""
        }));
    }

    removeItem(itemToRemove) {
        const userName = this.props.userName;        
        console.log(itemToRemove);
        const database = firebase.database().ref('users/' + userName + "/" + category );
        database.child(itemToRemove).remove();
    }
    getStoredData() {
        const userName = this.props.userName;
        const category = "clothing"
        const dbRef = firebase.database().ref('users/' + userName + "/" + category);
        if (this.props.userName) {
            dbRef.on("value", (firebaseData) => {
                const itemsArray = [];
                const itemsData = firebaseData.val();

                for (let itemKey in itemsData) {
                    itemsArray.push(itemsData[itemKey])
                }

                this.setState({
                    initialItems: itemsArray
                }, () => console.log(this.state.initialItems));
            });
            {
                this.state.initialItems.map((item, i) => {
                    console.log(this.state.initialItems[i]);
                })
            }
        }
    }
    render() {
        return (
            <div className="main-category">
                <div className='inner-wrapper'>

                <h3 className="item-category">Clothing</h3>
                <ul className="items">
                    {this.state.initialItems.map((item, i) => {
                            console.log(this.state.initialItems);
                            return <ClubItem data={this.state.initialItems[i]} key={this.state.initialItems[i]} remove={this.removeItem} />
                    })}
                </ul>
                <form action="">
                    <input type="text" className="form-control" onChange={this.handleTextChange} value={this.state.text} />
                    <button className="btn btn-primary" onClick={this.handleAddItem} disabled={!this.state.text}>{"Add #" + (this.state.items.length + 1)}</button>
                </form>
                </div>
            </div>
        );
    }
}

export function ClubItem(props) {
        return(
            <li className="club-item">
                <input type="checkbox" className="form-check-input"/>
                {props.data}
                <button onClick={() => props.removeItem(props.data.key)}>Remove Item</button>
            </li>
        )
    }

export default AddClothing

从“React”导入React；
从“react dom”导入react dom；
类AddReact.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
正文：“，
姓名首字母：[]
};
this.handleTextChange=this.handleTextChange.bind（this）；
this.handleAddItem=this.handleAddItem.bind（this）；
this.removietem=this.removietem.bind（this）；
this.getStoredData=this.getStoredData.bind（this）；
this.category=“服装”；
}
handleTextChange（事件）{
这是我的国家({
文本：event.target.value
});
}
handleAddItem（事件）{
event.preventDefault（）；
//使用日期发布ID号
常量newItem={
id:Date.now（），
text:this.state.text，
完成：错误
};
const userName=this.props.userName；
const category=“服装”
const database=firebase.database（）.ref（'users/'+userName+“/”+category）；
database.push（newItem.text）；
this.setState（（prevState）=>({
项目：prevState.items.concat（新项目），
案文：“”
}));
}
removeItem（itemToRemove）{
const userName=this.props.userName；
console.log（itemToRemove）；
const database=firebase.database（）.ref（'users/'+userName+“/”+category）；
database.child（itemToRemove.remove（）；
}
getStoredData（）{
const userName=this.props.userName；
const category=“服装”
const dbRef=firebase.database（）；
if（this.props.userName）{
dbRef.on（“值”，（firebaseData）=>{
const itemsArray=[]；
const itemsData=firebaseData.val（）；
for（让itemKey输入itemsData）{
itemsArray.push（itemsData[itemKey]）
}
这是我的国家({
initialItems:itemsArray
}，（）=>console.log（this.state.initialItems））；
});
{
this.state.initialItems.map（（项，i）=>{
log（this.state.initialItems[i]）；
})
}
}
}
render（）{
返回(
服装

{this.state.initialItems.map（（项，i）=>{
console.log（this.state.initialItems）；
返回
})}

{“添加”+（this.state.items.length+1）}
);
}
}
导出功能ClubItem（道具）{
返回(

{props.data}
props.removietem（props.data.key）}>Remove项

)
}
导出默认的衣服

不使用任何参数来指示要删除的子项。而是对要删除的引用调用

remove（）

。因此，在你的情况下：

database.child(itemToRemove).remove();

---

对于此错误：

未捕获的TypeError:无法读取onClick上未定义的属性“props”

您不能只在渲染方法的JSX中调用

props

。它必须是

this.props

：

export function ClubItem(props) {
    return(
        <li className="club-item">
            <input type="checkbox" className="form-check-input"/>
            {props.data}
            <button onClick={() => this.props.removeItem(this.props.key)}>Remove Item</button>
        </li>
    )
}

导出函数ClubItem（props）{
返回(

{props.data}
this.props.removietem（this.props.key）}>Remove项

)
}

应该是

道具.移除项目（…）

，而不是

道具.移除（…）

？@danh啊，谢谢你指出这一点！就我而言，一个打字错误，我已经疯狂地尝试了很多事情，我一定会感到困惑。不幸的是，它仍然不能与该更改一起工作。现在我得到了这个错误：”未捕获的TypeError:props.removietem不是一个函数“我的反应不是很灵敏，我想可能是

this.removietem（）

还请注意@Frank在下面的建议，在该函数中，没有必要发送参数来删除（）@danh谢谢你的建议！仍然没有做这件事，得到另一个错误：”未捕获类型错误：无法在上面的ClubItem函数中读取undefined at onClick“的属性'removietem'，您引用的是

props.removietem（props.data.key）

，但是在父添加衣服组件中

组件有一个名为

remove

的道具。您需要将道具名称更改为

removietem={…}

。两个道具名称都需要匹配，在您引用不存在的道具时，它是未定义的（因此出现错误“无法读取未定义的属性”removeItem）。您还需要在ClubItem函数中正确绑定此，正如@Frank在下面指出的。似乎OP在输入执行删除的函数时遇到了问题。我认为在JS中，这是无害的（尽管表示误解）

export function ClubItem(props) {
    return(
        <li className="club-item">
            <input type="checkbox" className="form-check-input"/>
            {props.data}
            <button onClick={() => this.props.removeItem(this.props.key)}>Remove Item</button>
        </li>
    )
}