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

Question

我有一个包含两个组件的 React 应用程序。我的子组件有一个包含一些记录的表。每条记录都有一个按钮，我在 onclick 中调用一个带有参数 (id) 的函数 (editUser)。在该函数中，我通过 props 将该 id 发送到父组件。该函数已在构造函数中绑定。但是当按钮点击时，控制台说this.props.userId 不是一个函数子组件：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;