React类组件遇TypeScript错误：Property 'value'不存在于Readonly类型，求帮助

Hey there! I’ve dealt with this exact TypeScript error in React class components countless times—let’s walk through all the common causes and fixes to get your App.tsx back on track.

1. You Forgot to Define the Component's State Type #

TypeScript is strict about type checking, and when you create a class component without explicitly defining its state structure, React defaults the state type to Readonly<{}> (an empty read-only object). That’s why it throws an error when you try to access this.state.value—it has no idea value exists!

Fix: Add a State Interface/Type #

Define an interface (or type alias) that describes your state shape, then pass it as the second generic parameter to React.Component (the first parameter is for props, which can be empty {} if you don’t use any props):

import React from 'react';

// Define your state structure
interface AppState {
  value: string; // Adjust the type to match your actual value (number, boolean, etc.)
}

// Pass the state type as the second generic argument
class App extends React.Component<{}, AppState> {
  // Initialize state (either inline or in the constructor)
  state = {
    value: 'initial value'
  };

  render() {
    return <div>{this.state.value}</div>; // No more error!
  }
}

export default App;

2. Mixed Up Props and State Generic Parameters #

It’s easy to mix up the order of the generic parameters for React.Component. Remember: the first parameter is for props, the second is for state. If you accidentally passed your state type as the first parameter, TypeScript will treat it as props instead of state, leaving your state type as the empty default {}.

Example of the Mistake: #

// Wrong: State type is passed as the first (props) parameter
class App extends React.Component<AppState> {
  state = { value: 'test' };
  render() {
    return <div>{this.state.value}</div>; // Error still occurs
  }
}

Fix: Correct the Generic Order #

Make sure to include both parameters (even if props are empty {}):

class App extends React.Component<{}, AppState> {
  // ... rest of your code
}

3. State Initialization Mismatches the Defined Type #

If you did define a state type but initialized value with a type that doesn’t match, TypeScript might throw a related error (or still fail to recognize value if the initialization is invalid). For example, if your AppState defines value as a string but you initialized it as undefined without marking it as optional.

Fix: Align Initialization with State Type #

Either update the state type to allow the initial value, or adjust the initialization:

// If value can be undefined, mark it as optional in the interface
interface AppState {
  value?: string;
}

// Or initialize with a valid value matching the type
state = {
  value: '' // Empty string is a valid string
};

4. Using React.PureComponent Without State Type #

If you’re using React.PureComponent instead of React.Component, the same rules apply—you still need to explicitly define the state type as the second generic parameter. The default state type for PureComponent is also Readonly<{}>, so you’ll get the same error if you skip the type definition.

Fix for PureComponent: #

import React from 'react';

interface AppState {
  value: string;
}

class App extends React.PureComponent<{}, AppState> {
  state = { value: 'pure component test' };
  render() {
    return <div>{this.state.value}</div>;
  }
}

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