React项目中Firebase数据库删除指定ID交易记录的实现问题

你当前的删除逻辑存在4处核心问题：

1. 原有deleteItem方法仅修改了本地state，未同步删除Firebase数据库中的对应记录，刷新后数据会恢复
2. 存储、读取交易记录时未保存Firebase自动生成的节点唯一key，无法定位需要删除的数据库节点
3. 子组件的删除按钮未绑定点击事件，也未接收父组件传递的删除方法与对应记录标识，删除操作根本不会触发
4. 原有删除方法中调用的this.state.items和你的实际state字段transactions不匹配，本身就无法正确过滤数据

步骤1：调整数据读写逻辑，保存Firebase节点唯一标识 #

修改addNewTransaction方法，将Firebase生成的节点key存入本地交易记录：

// add transaction
addNewTransaction = () => {
    const {name, company, position, link, currentUID} = this.state;
    
    // validation
    if(name && company && position && link){
        const newTransaction = {
            name: name,
            company: company,
            position: position,
            link: link,
            user_id: currentUID
        };
        
        fire.database().ref('Transactions/' + currentUID).push(newTransaction)
        .then((data) => {
            // 把Firebase生成的唯一key存入本地记录
            const BackUpState = [...this.state.transactions, {
                ...newTransaction,
                firebaseKey: data.key,
                id: this.state.transactions.length + 1
            }];
            this.setState({
                transactions: BackUpState,
                name: '',
                company: '',
                position: '',
                link: ''
            })
        }).catch((error)=>{
            console.log('error ' , error)
        });
    }
}

同时修改componentWillMount的读取逻辑，把Firebase节点key存入本地：

componentWillMount(){
    const {currentUID} = this.state;
    const BackUpState = [];
    fire.database().ref('Transactions/' + currentUID).once('value',
    (snapshot) => {
        snapshot.forEach((childSnapshot) => {
            BackUpState.push({
                id: childSnapshot.val().id,
                name: childSnapshot.val().name,
                company: childSnapshot.val().company,
                position: childSnapshot.val().position,
                link: childSnapshot.val().link,
                user_id: childSnapshot.val().user_id,
                firebaseKey: childSnapshot.key // 存储Firebase节点key
            });
        });
        this.setState({
            transactions: BackUpState,
        });
    });
}

步骤2：实现正确的删除方法 #

在Tracker组件中新增删除逻辑，先删数据库再更新本地state：

deleteTransaction = (firebaseKey) => {
    const {currentUID} = this.state;
    // 先删除Firebase中的对应节点
    fire.database().ref(`Transactions/${currentUID}/${firebaseKey}`).remove()
    .then(() => {
        // 删除成功后再过滤本地state
        const filteredTransactions = this.state.transactions.filter(item => item.firebaseKey !== firebaseKey);
        this.setState({
            transactions: filteredTransactions
        });
    })
    .catch(error => console.log('删除失败：', error));
}

步骤3：修改Transaction子组件，绑定删除事件 #

import React from 'react';

const Transaction = props => {
    return (
        <li>
            <div>{props.name}</div>
            <div>{props.company}</div>
            <div>{props.position}</div>
            <div>{props.link}</div>
            <button onClick={() => props.deleteTransaction(props.firebaseKey)}>remove</button>
        </li>
    );
}

export default Transaction;

步骤4：修改父组件渲染逻辑，传递参数 #

修改render中交易列表的遍历代码，将删除方法和对应记录的key传递给子组件：

{
    this.state.transactions.map((item) => (
        <Transaction 
            key={item.firebaseKey}
            firebaseKey={item.firebaseKey}
            name={item.name}
            company={item.company}
            position={item.position}
            link={item.link}
            deleteTransaction={this.deleteTransaction}
        />
    ))
}

内容的提问来源于stack exchange，提问作者Jan Dohinog