React子组件调用父方法setState时报Cannot read properties of undefined错误

• 合成事件池化导致事件对象属性丢失
  React的合成事件会被复用，事件回调执行完成后事件对象的所有属性都会被清空重置。你在父组件onChangeEmailHandler的setState函数式更新回调中读取event.target.value，而该回调是异步执行的，此时event.target已经变为undefined，读取value失败后给email赋值为undefined，后续TextField组件内部读取该值的length属性就会触发报错。
• 子组件未正确获取邮箱状态值
  父组件的邮箱状态存储在自身的state中，但你没有将state.email作为props传递给子组件，子组件中直接绑定value={state.email}，这里的state在子组件作用域中未定义，最终value值为undefined，同样会触发读取length的报错。

1. 改造父组件的事件处理逻辑，提前存储输入值，避免在异步回调中访问事件对象：

const onChangeEmailHandler = (event) => {
    // 提前存储输入值，脱离事件对象的生命周期限制
    const inputEmail = event.target.value
    setState(prevState => {
        return { ...prevState, email: inputEmail }
    })
}

2. 父组件新增props传递邮箱状态，子组件调整value绑定逻辑：
   父组件渲染LoginComponent时新增email属性传递：

<LoginComponent
    email={state.email}
    onChangeEmailHandler={onChangeEmailHandler}
/>

子组件接收props后替换原有value绑定：

const LoginComponent = props => {
    const classes = styles();
    // 接收父组件传递的email状态
    const { onChangeEmailHandler, email } = props;
    const [isSignUpPage, setIsSignUpPage] = useState(false);

    return (
        <React.Fragment>
            <TextField 
              type='text' name='email' id='email' value={email}
              onChange={(event) => onChangeEmailHandler(event)}
            />
        </React.Fragment>
    )
}

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