React类组件中声明State时引用内部State报错，如何解决？

你这段代码出错的核心原因很直观——在构造函数初始化this.state的过程中，this.state还没完全创建完成！你在steps数组里的<ABC mem={this.state.memory} />试图访问this.state.memory，但这时候memory属性还没被赋值到state对象里，自然会拿到undefined，甚至直接抛出运行错误。

下面给你两种针对性的解决方案，看你的实际场景选择：

场景1：组件是静态的（不需要随memory变化） #

如果你的memory不会被修改，或者<ABC>组件不需要响应memory的更新，我们可以先把memory的内容存在临时变量里，再用这个变量同时初始化state的memory属性和给<ABC>传参：

constructor(props){
  super(props);
  // 先定义临时变量存储memory的值
  const memoryValue = "Testing";
  this.state = {
    memory: memoryValue,
    steps:[ 
      { id: '1', component: <ABC mem={memoryValue} /> }
    ]
  }
}

这种方式完美避开了访问未初始化this.state的问题，同时保证组件能拿到正确的初始值。

场景2：组件需要响应memory的变化 #

如果后续你会修改memory的值，并且希望<ABC>能实时拿到最新的mem属性，那更合理的做法是不要把组件实例存在state里，而是在render方法中动态渲染：

constructor(props){
  super(props);
  this.state = {
    // 这里只存组件本身，而不是已经创建好的实例
    steps:[ 
      { id: '1', component: ABC }
    ],
    memory: "Testing"
  }
}

render() {
  const { steps, memory } = this.state;
  return (
    <div>
      {steps.map(item => {
        // 把存储的组件赋值给大写开头的变量（React组件规范）
        const Component = item.component;
        // 每次render时都传入最新的memory值
        return <Component key={item.id} mem={memory} />;
      })}
    </div>
  );
}

这种方式的好处是，每当memory更新触发组件重渲染时，都会给<ABC>传入最新的mem值，确保组件始终同步最新的state状态。

额外提醒 #

尽量避免在state中存储组件实例，因为组件实例是和渲染周期绑定的，存在state里容易导致状态不同步、内存泄漏等问题，更推荐存储组件的定义（类/函数），然后在render中动态生成实例。

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