React中如何为回调函数类型的状态变量正确赋值？报错求助

你代码抛出的「Invalid left-hand side in assignment」错误，核心原因有两个：一是不能把函数调用（this.state.myStateDrawer()）作为赋值操作的左值，函数执行的返回值无法被赋值；二是React中绝不允许直接修改this.state，必须通过setState方法更新状态。

类组件正确实现方式 #

假设你使用的是类组件，下面是符合需求的完整实现：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：myStateDrawer是一个回调函数，默认设为空函数
    this.state = {
      myStateDrawer: () => {}
    };
  }

  // 独立函数，用于访问状态中的回调
  myDrawerState = () => {
    this.state.myStateDrawer();
  };

  render() {
    return (
      <MyComponent
        customOverride={(newValue) => {
          // 用setState更新存储回调函数的状态
          this.setState(
            {
              // 两种赋值逻辑，根据newValue的类型选择：
              // 1. 如果newValue本身就是要替换的回调函数，直接赋值
              myStateDrawer: newValue,
              // 2. 如果newValue是回调函数需要接收的参数，包装成新函数
              // myStateDrawer: () => { /* 这里处理newValue，比如执行自定义逻辑 */ }
            },
            // 状态更新完成后执行特定操作（利用setState的异步回调）
            () => {
              this.myDrawerState();
            }
          );
        }}
      />
    );
  }
}

核心注意事项 #

• 禁止直接修改state：React的状态是不可变的，直接修改this.state不会触发组件重新渲染，还会导致状态不一致，必须通过setState更新。
• 回调函数的状态更新：因为myStateDrawer本身就是回调函数，更新时直接将新的函数（或包装后的函数）赋值给它即可。
• 异步状态的处理：setState是异步操作，如果需要确保状态更新后再执行操作，要把逻辑放在setState的第二个回调参数里，或者使用componentDidUpdate生命周期钩子监听状态变化。

函数组件实现参考（可选） #

如果是函数组件，用useState和useEffect也能实现相同逻辑：

import { useState, useEffect } from 'react';

function ParentComponent() {
  // 初始化存储回调函数的状态
  const [myStateDrawer, setMyStateDrawer] = useState(() => {});

  const myDrawerState = () => {
    myStateDrawer();
  };

  // 监听myStateDrawer变化，自动执行特定操作
  useEffect(() => {
    myDrawerState();
  }, [myStateDrawer]);

  return (
    <MyComponent
      customOverride={(newValue) => {
        // 更新回调函数状态
        setMyStateDrawer(newValue);
      }}
    />
  );
}

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