React 错误 Property ‘X’ does not exist on type ‘Readonly<{}>‘

React 2年前 81

当我们尝试访问未键入的类组件的 props 或状态时，会发生 React.js 错误“Property does not exist on type ‘Readonly<{}>’”。要解决该错误，需要使用 React.Component 类上的泛型来输入该类的道具或状态对象。

下面是错误发生的示例。

import React from 'react';

class App extends React.Component {
  constructor(props: any) {
    super(props);

    this.state = {value: ''}; // 使用状态，但我们没有输入它
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          {/*
            ⛔️ Error:
            Property 'value' does not exist on type 'Readonly<{}>'.ts(2339)
          */}
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

请注意，我们的类组件在其 state 对象中有一个 value 属性。

错误的原因是——我们没有输入类的状态对象，所以如果我们尝试访问状态对象的任何属性，我们会得到一个错误。

props 对象的情况也是如此——如果我们不显式键入它，尝试访问 props 对象上的属性会导致错误。

要解决该错误，需要使用 React.Component 类的泛型作为 React.Component<PropsObject, StateObject> 。

import React from 'react';


// 我们将 props 设置为空对象，并将 state 设置为 {value: string}
class App extends React.Component<{}, {value: string}> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            // ✅ 现在一切正常
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

我们在类中的状态对象上键入了 value 属性，因此我们现在可以将其作为 this.state.value 访问。

我们为 props 对象的类型传递了一个空对象，因为这个类不接受任何 props。

如果我们不知道如何输入 props 或 state 对象并且想要禁用类型检查，请使用 any 类型。

import React from 'react';

// ?️ 对 props 和 state 禁用类型检查
class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

我们在输入 props 和 state 对象时使用了 any 类型，这有效地关闭了类型检查。

现在我们可以访问 this.props 和 this.state 对象上的任何属性，而不会出现类型检查错误。

这是一个类的示例，该类也显式键入了 props 对象。

import React from 'react';

// ?️ type props as {name: string}, and state as {value: string}
class App extends React.Component<{name: string}, {value: string}> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>

        <h1>{this.props.name}</h1>
      </div>
    );
  }
}

export default App;