Question

[SOLVED]在下面寻找答案

从firebase数据库中删除对象时遇到问题，对此有经验，但是这次它不起作用：

动作：

export const firebase_db = firebase.database().ref();

export function deleteData(key) {
  return dispatch => firebase_db.child(key).remove(); 
}

减速器：

case DELETE_DATA:
    return _.omit(state, action.payload);

basic_list.js：

clickHandler() {
    this.props.deleteData();
}

和按钮：

        <td><button
            onClick = {this.clickHandler()}
            className="btn btn-outline-secondary btn-danger">
            Delete
        </button></td>

我应该访问firebase对象的密钥，它位于this.props.data[post]中，但是当我这样做时：

clickHandler() {
    this.props.deleteData(this.props.data[post]);
}

它说ReferenceError: post is not defined，然后在onClick中这样做：

onClick = {this.clickHandler(this.props.data[post])}

具有：

clickHandler() {
    this.props.deleteData();
}

我遇到错误Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

，然后当我尝试反引号时，例如：

clickHandler(key) {
    this.props.deleteData(`key`);
}

与

onClick = {this.clickHandler(this.props.data[post])}

我没有任何错误，但是什么也没发生...

映射如下所示：

renderData(DataRender) {
    if (_.isEmpty(this.props.data)) {
        return <td>Loading...</td>
    } else {
        return Object.keys(this.props.data).map((post, key) => (
        <tr key={key} post={post} id={key}>
            <td>{this.props.data[post].adress}</td>

按钮在此地图函数中，您可以看到我如何访问地址，[post]是该对象的哈希值...

如果有人问，我已经在构造函数中绑定了clickHandler

谢谢！

编辑：所以现在我的动作看起来像这样：

export function deleteData(key) {
  return dispatch => firebase_db.child(`${key}`).remove(); 
}

但是当我尝试使用this.props.data[post]插入哈希时，它会显示ReferenceError: post is not defined

Answer 1

看一下您的方法吧：

clickHandler() {
    this.props.deleteData(this.props.data[post]);
}

如果它说post没有定义，我认为是可以预期的，因为 post 不在方法的 scope 中，除非您在方法的其他地方声明了它。文件或全局范围内。

还有一件事是使用

<td><button
       onClick = {this.clickHandler()}
       className="btn btn-outline-secondary btn-danger">
       Delete
 </button></td>

Event Handler onClick 应该会收到要调用的功能，并且 this.clickHandler（）不返回任何内容（ undefined ），这就是原因：

与 onClick = {this.clickHandler(this.props.data[post])} 我没有任何错误，但是什么也没发生...

因为您应该像这样使用它

onClick={this.clickHandler}

，如果您想传递参数（考虑到 post 被定义），

onClick={(e) => this.clickHandler(e,this.props.data[post])}

然后：

clickHandler(e,data){
   // data = this.props.data[post]
   this.props.deleteData(data);
}

并且不要忘记在构造器中将您的方法 clickHandler 绑定到组件的作用域：

this.clickHandler = this.clickHandler.bind(this);

还有一件事是您没有动作派遣任何物体，因此我不知道您是否真的收到了任何东西还原器中的数据（操作对象）。我不知道这是否对您有帮助，但还是开始检查这些内容。

Answer 2

此答案是为了更轻松地阅读解决方案并查看整个代码！

因此对于如下所示的firebase数据库： firebase database

删除对象的正确方法是：

动作文件： ...导入Firebase配置文件后...

export const firebase_db = firebase.database().ref();

export const DELETE_DATA = 'DELETE_DATA';

export function deleteData(key) {
  return dispatch => firebase_db.child(`${key}`).remove(); 
}

减速器应为：

import {DELETE_DATA } from '../actions';
import _ from 'lodash';

case DELETE_DATA:
    return _.omit(state, action.payload);

下一步是您的组成部分：

导入您的操作：

import { deleteData } from '../actions/index';

您应该绑定动作创建者：

export default connect(mapStateToProps, {FetchData, deleteData})(BasicList);

我正在渲染数据并从数据库中获取一个特定的值，您可以看到整个渲染功能，也许它可以为您提供帮助：

renderData(DataRender) {
    if (_.isEmpty(this.props.data)) {
        return <td>Loading...</td>
    } else {
        return Object.keys(this.props.data).map((post, key) => (
        <tr key={post} post={post} id={key}>
            <td>{this.props.data[post].adress}</td>
            <td>{this.props.data[post].city}</td>
            <td>{this.props.data[post].owner}</td>
            <td>
                <Link to={`/data/${post}`}>
                    detalis
                </Link>
            </td>
            <td><button
                onClick = {(e) => this.clickHandler(e, [post])}
                className="btn btn-outline-secondary btn-danger">
                Delete
            </button></td>
        </tr>
    ));
    }
}

在这里您几乎看不到什么，首先是如何在Firebase数据库对象上进行映射，然后您可以看到如何使用Firebase哈希作为url（to = {{{/data/${post}}）转到特定对象，最后，我自己的问题，onClick函数，成功删除项目的后续步骤：

创建该clickHandler函数，应如下所示：

clickHandler(e, data) {
    this.props.deleteData(data);
}

您应该绑定它，可以在构造函数中完成

constructor(props) {
    super(props);

    this.clickHandler = this.clickHandler.bind(this);
}

对于此特定文件，我的导入语句为：

import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import _ from 'lodash';

希望我没有忘记什么，也请看一下注释，那里可以看到一些错误和解决方案，请仔细阅读jpacareu的答案，有很好的解释（并感谢jpacareu）；如果您对此自由评论有任何疑问，并且对Firebase数据库有疑问，请使用问题的链接进行评论。

从Firebase，React，ES6删除对象

2 个答案: