React树组件点击切换功能失效，this.setState调用异常求助

嘿，我来帮你搞定这个React树组件的状态更新问题！你遇到的this指向undefined、没法调用setState的核心原因，是你手动创建React.Component实例的写法不符合React的组件规范——React并没有按照它的生命周期机制来管理你用Object.create生成的实例，自然没法正确绑定组件上下文。

下面给你两种标准的解决方案，都是React官方推荐的写法：

方案一：函数组件 + useState Hook（推荐） #

现在React更推崇函数组件配合Hook来管理状态，写法更简洁直观：

import { useState } from 'react';

export function TreeComponent(props) {
  // 用useState存储展开的节点集合，用节点id作为标识
  const [expandedNodes, setExpandedNodes] = useState(new Set());

  // 切换节点展开/收起的函数
  const toggleExpand = (nodeId) => {
    setExpandedNodes(prevState => {
      const updatedNodes = new Set(prevState);
      // 根据当前状态切换：存在则移除，不存在则添加
      updatedNodes.has(nodeId) ? updatedNodes.delete(nodeId) : updatedNodes.add(nodeId);
      return updatedNodes;
    });
  };

  // 递归渲染树结构的辅助函数
  const renderTree = (data) => {
    return (
      <ul>
        {data.map(node => (
          <li key={node.id}>
            {/* 点击节点标题触发切换 */}
            <span onClick={() => toggleExpand(node.id)} style={{ cursor: 'pointer' }}>
              {/* 根据展开状态显示不同符号 */}
              {expandedNodes.has(node.id) ? '▼' : '▶'} {node.title}
            </span>
            {/* 如果节点展开且有子节点，递归渲染子树 */}
            {expandedNodes.has(node.id) && node.children && renderTree(node.children)}
          </li>
        ))}
      </ul>
    );
  };

  return renderTree(props.data);
}

方案二：类组件写法（兼容旧版React） #

如果你习惯用类组件，也可以用标准的继承方式，React会自动帮你处理this绑定：

import React from 'react';

export class TreeComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：存储展开的节点集合
    this.state = {
      expandedNodes: new Set()
    };
    // 手动绑定toggleExpand的this，避免点击时this指向错误
    this.toggleExpand = this.toggleExpand.bind(this);
  }

  // 切换节点展开/收起的方法
  toggleExpand(nodeId) {
    this.setState(prevState => {
      const updatedNodes = new Set(prevState.expandedNodes);
      updatedNodes.has(nodeId) ? updatedNodes.delete(nodeId) : updatedNodes.add(nodeId);
      return { expandedNodes: updatedNodes };
    });
  }

  // 递归渲染树结构的辅助方法
  renderTree(data) {
    return (
      <ul>
        {data.map(node => (
          <li key={node.id}>
            <span onClick={() => this.toggleExpand(node.id)} style={{ cursor: 'pointer' }}>
              {this.state.expandedNodes.has(node.id) ? '▼' : '▶'} {node.title}
            </span>
            {this.state.expandedNodes.has(node.id) && node.children && this.renderTree(node.children)}
          </li>
        ))}
      </ul>
    );
  }

  render() {
    return this.renderTree(this.props.data);
  }
}

为什么你的原写法会出问题？ #

你用Object.create(React.Component.prototype)手动生成实例的方式，完全绕开了React的组件初始化流程——React不会为这个实例绑定上下文、管理生命周期，所以this根本不是指向有效的组件实例，自然调用不了setState。只有遵循React的组件规范（函数组件/类组件），React才能正确处理状态更新和上下文绑定。

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