{
  "id": "react/error-cannot-read-properties-of-undefined-reading-setstate",
  "signature": "TypeError: Cannot read properties of undefined (reading 'setState')",
  "signature_zh": "TypeError: 无法读取 undefined 的属性 'setState'",
  "regex": "TypeError: Cannot read properties of undefined \\(reading 'setState'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A class component is trying to call this.setState but 'this' is undefined, typically because the method is not bound to the instance or the component is not properly instantiated.",
  "root_cause_type": "generic",
  "root_cause_zh": "类组件试图调用 this.setState，但 'this' 是 undefined，通常是因为方法没有绑定到实例或组件没有正确实例化。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.0.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 16.14.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Use arrow functions in JSX event handlers without binding",
      "why_fails": "Arrow functions in JSX create a new function on every render, causing performance issues and still not fixing the 'this' context if the method is not bound.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    },
    {
      "action": "Call setState as a standalone function without 'this'",
      "why_fails": "setState is a class instance method and must be called on 'this'; calling it standalone will throw a different error.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    },
    {
      "action": "Use functional setState syntax (prevState => newState) but still without binding",
      "why_fails": "The functional syntax doesn't solve the 'this' binding issue; the method still needs to be called on the correct context.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Bind the method in the constructor: constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }",
      "success_rate": 0.9,
      "how": "Bind the method in the constructor: constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use class property arrow functions: handleClick = () => { this.setState(...); }",
      "success_rate": 0.95,
      "how": "Use class property arrow functions: handleClick = () => { this.setState(...); }",
      "condition": "",
      "sources": []
    },
    {
      "action": "Convert the class component to a function component with useState hook to avoid 'this' issues entirely.",
      "success_rate": 0.85,
      "how": "Convert the class component to a function component with useState hook to avoid 'this' issues entirely.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Bind the method in the constructor: constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }",
    "Use class property arrow functions: handleClick = () => { this.setState(...); }",
    "Convert the class component to a function component with useState hook to avoid 'this' issues entirely."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/Component#setstate",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.86,
  "fix_success_rate": 0.92,
  "resolvable": "true",
  "first_seen": "2023-08-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}