React子组件控制父组件按钮调用callbackFunction报undefined错误如何解决

• React 函数组件不存在this实例，所有this.xxx的写法都会读取undefined，是触发本次报错的直接原因
• 回调函数逻辑不符合React状态驱动规则：你已经声明了buttonState状态控制按钮禁用，不需要手动操作DOM修改按钮属性
• 子组件未声明接收parentCallback属性，且调用时错误使用了this
• 子组件setChecked是异步更新，直接传递当前checked会出现状态滞后一次的问题

ContactForm.js #

import { useState } from 'react';
// 其他原有import保留

function ContactForm() {
  const [buttonState, setButtonState] = useState(true);
  // 原有state相关代码保留
  const { PUID,FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate, frequency, test, exp, signed, laptop, transfer, existing, newL, categories} = state;

  // 回调函数写在组件内部，直接修改buttonState状态
  const callbackFunction = (isChecked) => {
    // 逻辑按需调整：如果开关勾选时要启用按钮，就setButtonState(!isChecked)
    setButtonState(!isChecked);
  };

  const steps = [
    // 传回调不用加this，直接传函数名
    <UserInfoStep parentCallback={callbackFunction} {...{  PUID,FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate}} />
  ];

  return (
    <ContactFormContext.Provider value={{ dispatch }}>
      {/* 原有代码保留 */}
      <Button
        disabled={buttonState}
        type="submit"
        className={classes.button}
        color="primary"
        variant="outlined"
        onClick={e => {
          e.preventDefault();
          if (isLast) {
            handleSubmit();
          } else {
            goForward();
          }
        }}
      >
        {isLast ? "Submit" : "Next"}
      </Button>
      {/* 原有代码保留 */}
    </ContactFormContext.Provider>
  );
}

export default ContactForm;

UserInfoStep.js #

import { useContext, useState } from 'react';
// 其他原有import保留

// props列表增加parentCallback接收父组件传的回调
function UserInfoStep ({ PUID, FirstName, LastName, EurofinsLegalEntity, EurofinsBusinessUnit, StartDate, EndDate, parentCallback }) {
  const { dispatch } = useContext(ContactFormContext);
  const [checked, setChecked] = useState(false);

  const handleChange = () => {
    setChecked((prev) => {
      const newChecked = !prev;
      // 拿到最新的状态值再传给父组件，避免异步更新导致的状态滞后
      parentCallback(newChecked);
      return newChecked;
    });
  };

  return(
    {/* 原有代码保留 */}
    <FormControlLabel
      control={<Switch checked={checked} onChange={handleChange} />}
    />
  );

}

export default UserInfoStep;

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