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

Question

我很难通过用户输入从 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();
}

...

<button onClick={() => props.removeItem(props.data.key)}>Remove Item</button>

我尝试过的都没有成功；现在我收到这个错误:Uncaught TypeError: props.removeItem is not a function。我的直觉是，我以某种方式缺少用于处理数据库中项目的 firebase key ，但我似乎无法弄清楚如何集成它们或使用它们进行删除。

这是它在 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

Answer 1

Reference.remove() method不带参数来指示要删除的子项。您改为对要删除的确切引用调用 remove()。所以在你的情况下:

database.child(itemToRemove).remove();

---

对于这个错误:

Uncaught TypeError: Cannot read property 'props' of undefined at onClick"

您不能只在渲染方法的 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>
    )
}