如何解决错误“this.props.myFunction”不是反应中的函数？

Question

我有一个包含两个组件的反应应用程序。我的子组件有一个包含一些记录的表。每条记录都有一个按钮，我在 onclick 中调用一个带有参数（id）的函数（editUser）。在那个函数中，我通过 props 将该 id 发送到 Parent 组件。该函数已在构造函数中绑定。但是当按钮点击时，控制台说 this.props.userId is not a function

子组件：

class UsersTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.editUser = this.editUser.bind(this);

    }

    editUser(id) {
       this.props.userId(id);
    }

    render() {
        return (
        <TableBody>
            {data
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                    return (
                        <TableRow key={n.id}>
                            <TableCell className={classes.fixedTd}>
                                <BorderColorIcon onClick={() => this.editUser(n.userId)} className="action margin-r" />
                            </TableCell>
                        </TableRow>
                    );
                })}
        </TableBody>
        );
    }
}

export UsersTable;

父组件：

class CompanyUserMgt extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    editUser = (id) => {
        console.log("user", id)
    }


    render() {
        return (
            <div className="">
        <UsersTable
            userId={this.editUser}
                    key={this.state.tableKey}
                />
            </div>
        )
    }
}

export default CompanyUserMgt;

我该如何解决这个问题？

Answer 1

我认为你可以简化一些事情，你可以在你的子组件上尝试下面的代码吗？

class UsersTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };

    }

    render() {
        return (
        <TableBody>
            {data
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                    return (
                        <TableRow key={n.id}>
                            <TableCell className={classes.fixedTd}>
                                <BorderColorIcon onClick={() => this.props.userId(n.userId)} className="action margin-r" />
                            </TableCell>
                        </TableRow>
                    );
                })}
        </TableBody>
        );
    }
}

export UsersTable;