ReactJS：当子组件调用parent时,“this.props”不是函数

我已经写了这段代码,目前正在一个onClick事件中出现错误.我有两个事件,子元素上的onClick事件和顶级父元素上的onChange事件.

预期的行为应该是更改当前保存在Container组件中的activeAccount变量.为此,我在AccountRow组件上添加了一个onClick处理程序,然后调用顶级父项的onChange函数.

但是,行

'this.props.onChange(this.props.account)',

在

handleClick: function(e) {
        this.props.onChange(this.props.account);
    },

意味着使用参数’this.props.account’调用父函数,

给我这个错误：

Uncaught TypeError: this.props.onChange is not a function.

我最初认为这是一个范围界定的问题,但我补充说

{...this.props}

在父容器中的每个子节点和嵌套子节点上
零件.所以,所有的道具都应该被传播到AccountRow组件.然而,问题仍然存在.

var ACCOUNTS = [
    {name: 'cash on hand'},{name: 'savings account'},{name: 'shared account'},{name: 'my second wallet'}
];

var TRANSACTIONS = [
    {date: '',name: 'Bananas',amount: 6,category: 'Groceries',account: 'cash on hand'},{date: '',name: 'Apples',amount: 2.50,name: 'Cash withdrawal',amount: 250,account: 'savings account'}
];

var AccountRow = React.createClass({

    handleClick: function(e) {
        this.props.onChange(this.props.account);
    },render: function () {
        return (
            <li onClick = {this.handleClick}> {this.props.account}</li>
        )}
});

var AccountList = React.createClass({

    render: function () {

        var rows = [];
        this.props.accounts.map(function(each_account) {
            rows.push(
                <AccountRow 
                    account = {each_account.name} 
                    key = {each_account.name}
                    {...this.props}     
                />);
                      })
    return (
        <ul>
        {rows}
        </ul>
    )   
    }   
});


var NavBar = React.createClass({

    render: function () {
        return (
            <div id = 'account-tabs'>
                <h2> Accounts </h2>
                <AccountList 
                    accounts = {this.props.accounts} 
                    {...this.props} 
                />
            </div>
        )
    }
});

var TransactionRow = React.createClass({
    render: function (){
        var trans = this.props.transaction;

        return (
            <tr>
            <td>{trans.date}</td>
            <td>{trans.name}</td>
            <td>{trans.amount}</td>
            <td>{trans.account}</td>
            <td><a href = ''>edit</a></td>
            </tr>
        )
    }
});

var TransactionList = React.createClass ({                      
    render: function () {

        var activeaccount = this.props.activeAccount;

        var rows = [];
        this.props.transactions.map(function(each_transaction) {
            if (each_transaction.account == activeaccount) {

                /* Very strange behavIoUr
                if (each_transaction account == this.props.activeAccount) 
                DOES NOT WORK,I do not kNow why this is the case
                */

                rows.push(<TransactionRow transaction = {each_transaction} key = {each_transaction.name} />);
            }
            else {
                /*console.log(each_transaction.account);*/
            }     
        })
        return (
            <tbody>
            {rows}
            </tbody>
        )
    }
});

var TransactionsTable = React.createClass({
    render: function() {

        return (
            <div id = 'recent-transactions'>
            <h2>Recent Transactions for {this.props.activeAccount}</h2>
            <table>
                <tr>
                    <th>date</th>
                    <th>name</th>
                    <th>amount</th>
                    <th>account</th>
                    <th>edit </th>
                </tr>
                <TransactionList 
                    transactions = {this.props.transactions}
                    activeAccount = {this.props.activeAccount}
            />
            </table>
            </div>
        )
    }
});

var TransactionForm = React.createClass({
    render: function() {
        return (
            <div>
            <h2>Add Transaction </h2>
            <p>Transaction name</p>
            <input type = 'text' />
            <p>Price</p>
            <input type = 'number'/>
            <p>Category (optional) </p>
            <input type = 'text' />
            </div>
        )
    }
});


var ButtonMenu = React.createClass ({
    render: function () {
        return (
            <div>
            <button>Add Transaction</button>
            </div>
        )
    }
});

var Container = React.createClass({

    getinitialState: function (){
        return {
            activeAccount: ACCOUNTS[0].name
        };
    },setActiveAccount: function(dat) {
        this.setState({
            activeAccount: dat  
        });
    },render: function () {
        return (
            <div id = 'wrapper'>
            <NavBar 
                accounts = {ACCOUNTS}
                activeAccount = {this.state.activeAccount}
                onChange = {this.setActiveAccount}
                {...this.props}
            />
            <TransactionsTable 
                transactions = {TRANSACTIONS}
                activeAccount = {this.state.activeAccount}
            />
            <TransactionForm />
            <ButtonMenu />
            </div>
        );
    }
});


React.render(<Container />,document.body);

感谢您的时间.

这个问题是由map函数引起的,当你调用map时,你应该传给thisArg：

this.props.accounts.map(function(each_account) {
  rows.push(
    <AccountRow 
      account = {each_account.name} 
      key = {each_account.name}
      {...this.props}     
    />);
 },this);

但是,这将导致AccountRow具有诸如帐户和activeAccount之类的冗余变量.我认为你应该考虑只传输onChange功能：

<AccountRow 
     account = {each_account.name} 
     key = {each_account.name}
     onChange = {this.props.onChange}
 />