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

我有一个包含两个组件的react应用程序。我的子组件有一个包含一些记录的表。每个记录都有一个按钮，我在onclick中调用一个带有参数（id）的函数（editUser）。在该函数中，我通过道具将该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;

类UsersTable扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ }; this.editUser=this.editUser.bind（this）； } 编辑用户（id）{ this.props.userId（id）； } render（）{ 返回( {数据 .slice（第页*rowsPerPage，第页*rowsPerPage+rowsPerPage） .map（n=>{ 返回( this.editUser（n.userId）}className=“action margin-r”/> ); })} ); } } 出口用户稳定； 父组件：

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;

class CompanyUserMgt扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
编辑用户=（id）=>{
console.log（“用户”，id）
}
render（）{
返回(
)
}
}
导出默认公司SERMGT；

---

我如何解决这个问题？

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

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;

类UsersTable扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ }; } render（）{ 返回( {数据 .slice（第页*rowsPerPage，第页*rowsPerPage+rowsPerPage） .map（n=>{ 返回( this.props.userId（n.userId）}className=“action margin-r”/> ); })} ); } } 出口用户稳定；

---

我觉得一切都很正常。我的建议是，尝试记录此并检查它显示的内容。我的假设是，在一切看起来都正常的地方，上下文正在丢失。如何在

BorderColorIcon

内单击

onClick

进行缩放？是否确保在类中正确使用Transfile arrow函数？您是否尝试过以常规方式声明editUser？@DoğancanArabacı是的，我也尝试过常规方式。但它不起作用，它起作用了！塔克斯。但是仍然不知道为什么函数不工作，很可能是因为这一行this.editUser=this.editUser.bind（this）；尝试将箭头函数绑定到对象函数