Question

我有一个React / Redux应用程序，用于列出事务，数据存储在MongoDB集合中。我已经设置了CRUD操作，可以添加和编辑事务，但我对删除功能有点挣扎。

我在Express.js中创建了一个删除端点：

export function deleteTransaction(id) {
    const request = axios.delete(`/api/transactions/${id}`);

    return {
        type: DELETE_TRANSACTION,
        payload: request
    }
}

在我的Redux动作创建者中，我有以下内容：

componentWillMount()

我在{this.props.transactions.map( (transaction, i) => <Transaction {...this.props} key={i} transaction={transaction} /> )}生命周期方法中通过Redux获取事务，然后映射结果以返回一大块JSXL

handleDelete(id) {
    this.props.deleteTransaction(id)
        .then(() => {
            this.context.router.push('/');
        });
}

我想我可以创建一个类似以下的方法：

_id

然后在onClick上调用此方法，并从props传入MongoDB文档cannot call deleteTransaction of undefined，但是在挂起和修改时，我收到错误说明handleDelete()，然后其他时候它正在删除所有集合。 ..各种奇怪的错误搞砸了应用程序的其他方面，所以我已经回复并向你寻求帮助React / Redux向导：）

有人能指出我正确的方向吗？

更新

我正在调用import React, { Component } from 'react'; import { Link } from 'react-router'; import numeral from 'numeral'; import moment from 'moment'; import TransactionEdit from './TransactionEdit'; export default class Transaction extends Component { render() { const { transaction } = this.props; return ( <tr> <td>{transaction.name}</td> <td>{moment(transaction.date).format('Do MMM YYYY')}</td> <td>{`£${numeral(transaction.amount).format('£ 0,0[.]00')}`}</td> <td><Link to={`/transaction/edit/${transaction._id}`} className="button">Edit</Link></td> <td><button onClick={this.props.handleDelete(transaction._id)}className="button">Delete</button></td> </tr> ); } }并从Transaction.js传递ID：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../actions/actionCreators';
import { Link } from 'react-router';

import Transaction from './Transaction';

class Transactions extends Component {
    componentWillMount() {
        this.props.fetchTransactions();
    }

    handleDelete(id) {
        this.props.deleteTransaction(id)
            .then(() => {
                this.context.router.push('/');
            });
    }

    static contextTypes = {
        router: PropTypes.object
    }

    render() {

        const { transactions } = this.props;

        if (!transactions) {
            return (
                    <div>
                        <p>Loading...</p>
                    </div>
            )
        }


        return (
            <section>
                <h2>Transactions <Link className="actionlink" to="/transactions/add">Add</Link></h2>
                <table className="financials -transactions">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th className="activefilter">Amount</th>
                            <th className="actions">&nbsp;</th>
                            <th className="actions">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.props.transactions.map(
                        (transaction, i) => 
                            <Transaction {...this.props} key={i} transaction={transaction} />
                    )}
                    </tbody>
                </table>
            </section>
         );
    }
}

function mapStateToProps(state) {
    return { 
        transactions: state.transactions.all 
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Transactions);

为清楚起见，这是整个Transactions.js文件：

Function2<String, String, String> appendString = new Function2<String, String, String>() {
  @Override
  public String call(String s1, String s2) {
    return s1 + s2;
  }
};

Function2<String, String, String> removeString = new Function2<String, String, String>() {
  @Override
  public String call(String s1, String s2) {
    return s1.replace(s2, "");
  }
};

谢谢：）

Answer 1

我的handleDelete帮助函数中未定义Id，因为我认为您需要绑定this函数的handleDelete实例才能传递ID。在onClick方法中，尝试onClick={this.props.handleDelete.bind(this, transaction._id)}

如何在React / Redux＆amp;中连接deleteOne功能MongoDB应用程序

更新

1 个答案: