React出现Expected `onClick` listener to be a function报错如何解决

你遇到的Expected "onClick" listener to be a function, instead got a value of "object" type.报错由多个代码错误共同导致，按优先级修复如下：

直接触发报错的问题 #

button组件的onClick属性传入了字符串值'onClick'，React事件绑定要求传入函数引用，需要把单引号替换为JSX语法的花括号：

// 错误写法
<button type="button" disabled={username.length === 0} onClick='onClick'>登录</button>
// 正确写法
<button type="button" disabled={props.username.length === 0} onClick={onClick}>登录</button>

其他需要同步修复的错误 #

• 导入逻辑错误：useState是React内置Hook，不能从./App文件导入，需要改为从react包引入；username、setUsername如果是父组件维护的状态，不需要单独导入，直接通过props接收即可。
• 无效属性冗余：input标签上的username={username}、setUsername={username}是无意义的自定义属性，直接删除即可。
• 状态引用错误：判断按钮禁用状态、提交登录信息时，应该使用父组件传入的props.username，不要直接引用从App导入的变量。

修复后的完整代码 #

import React from 'react';

function LoginPage(props) {
  const onClick = () => {
    props.onLogin(props.username);
  }

  return (
    <div className="chat-login-page-container">
      <div className="chat-login-page-controls-container">
        <h4>Set your username</h4>
        <input 
          type="text" 
          placeholder="Username"
          value={props.username} 
          onChange={props.onChange} 
        />
        <button 
          type="button" 
          disabled={props.username.length === 0} 
          onClick={onClick}
        >
          Log in
        </button>
      </div>
    </div>
  );
}

export default LoginPage;

内容的提问来源于stack exchange，提问作者Aidan Wallace