React组件传参报错：this.props.userId不是函数的解决方法

我帮你排查了代码里的问题，导致this.props.userId不是函数报错的核心原因加上几个潜在的代码问题，我整理了修复步骤和优化方案：

1. 子组件导出方式错误 #

你当前子组件用的是具名导出：export UsersTable;，但父组件里应该是用默认导入的方式（比如import UsersTable from './UsersTable'），这会导致父组件中拿到的UsersTable不是你定义的组件，自然无法正确传递userId这个回调props，最终触发报错。

修复方式：把子组件的导出改为默认导出：

// 替换原来的 export UsersTable;
export default UsersTable;

2. 子组件中data变量未定义 #

你的子组件直接使用了data变量，但代码里没有任何定义或来源，这会导致另一个“data is not defined”的报错。你需要从props中接收父组件传递过来的数据。

3. 可选优化：简化函数绑定 #

子组件中你在constructor里手动绑定了editUser函数，其实可以直接用类字段箭头函数来自动绑定this，省去bind的步骤，代码更简洁。

修改后的完整代码 #

子组件 UsersTable

class UsersTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
    // 用箭头函数的话可以删掉这行 bind 代码
    // this.editUser = this.editUser.bind(this);
  }

  // 改用箭头函数自动绑定this
  editUser = (id) => {
    // 可以加个判断，避免props未传递时的报错
    if (typeof this.props.userId === 'function') {
      this.props.userId(id);
    }
  }

  render() {
    // 从props中解构需要的变量，避免直接使用未定义的data
    const { data, page, rowsPerPage } = this.props;
    
    return (
      <TableBody>
        {/* 用可选链操作符?，避免data为undefined时调用slice报错 */}
        {data
          ?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
          .map(n => (
            <TableRow key={n.id}>
              <TableCell className={classes.fixedTd}>
                <BorderColorIcon 
                  onClick={() => this.editUser(n.userId)} 
                  className="action margin-r" 
                />
              </TableCell>
            </TableRow>
          ))}
      </TableBody>
    );
  }
}

// 改为默认导出
export default UsersTable;

父组件 CompanyUserMgt

class CompanyUserMgt extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      tableKey: 1,
      page: 0,
      rowsPerPage: 10,
      // 假设你的用户数据存在这里，根据实际情况替换
      usersData: []
    }
  }

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

  render() {
    const { page, rowsPerPage, usersData, tableKey } = this.state;
    
    return (
      <div className="">
        <UsersTable 
          userId={this.editUser} 
          key={tableKey}
          // 把数据和分页参数传递给子组件
          data={usersData}
          page={page}
          rowsPerPage={rowsPerPage}
        />
      </div>
    )
  }
}

export default CompanyUserMgt;

这样修改后，点击按钮就能正确把userId传递给父组件的editUser函数，控制台也不会再报错了。

内容的提问来源于stack exchange，提问作者David Johns