React组件传参报错：onChange is not a function问题排查

核心错误原因 #

• Profile组件props接收方式错误：你定义function Profile(onChange)时，参数onChange实际是整个props对象，而非传入的onChange函数。调用onChange()本质是调用一个对象，自然触发"不是函数"的报错。
• UserWindow组件存在同样问题：function UserWindow(onChange)的参数也是整个props对象，导致传给Profile的onChange是props对象，而非真正的更新函数。

修复步骤 #

1. 修正Profile组件的props接收
   改成解构props的写法：

   export default function Profile({ onChange }) {
       // 原业务逻辑保持不变
   }
   

   或者通过props对象获取：

   export default function Profile(props) {
       const onChange = props.onChange;
       // 原业务逻辑保持不变
   }
   

2. 修正UserWindow组件的props接收
   同样使用解构写法：

   function UserWindow({ onChange }) {
       return (
           <div>
               <header className="Login-Header">
                   <h1>Profile</h1>
               </header>
               <Profile onChange={onChange}/>
               <AuthenticatorForm/>
           </div>
       );
   }
   

3. 额外修复App组件的小问题
   setSeed(Math.random);需要调用Math.random()才能生成随机数，否则只是把函数本身赋值给seed，修改为：

   const update =()=>{
       setSeed(Math.random());
   }
   

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