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>

我尝试过的任何事都没有成功;现在我收到此错误：未捕获的TypeError：props.removeItem不是一个函数。我的直觉是我在某种程度上缺少用于处理数据库中的项目的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

Answer 1

Reference.remove() method没有参数来指示要删除的子项。您可以在要删除的确切参考上调用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>
    )
}

无法从firebase删除数据 - React，Javascript，Firebase

1 个答案: