如何解决错误“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 {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(n => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow key={n.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell className={classes.fixedTd}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BorderColorIcon onClick={() => this.props.userId(n.userId)} className="action margin-r" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </TableBody>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}export UsersTable;