将React JSX应用转为TSX时遇state/setState不存在错误求助

嘿，我一眼就瞅出你代码里的问题啦！咱们一步步来搞定：

1. 最核心的错误：Component泛型参数顺序搞反了 #

React的Component类泛型定义是先Props，后State，也就是Component<PropsType, StateType>。你现在写成了Component<STATE, PROPS>，这直接让TypeScript搞混了类型——它把你的状态类型当成了组件props的类型，把props类型当成了状态类型，自然就找不到state和setState啦！

2. 状态接口和实际state不匹配 #

你定义的STATE接口只有loading: boolean，但constructor里给state加了fruitsData: []，这会触发类型不匹配警告，得把STATE接口补上这个字段。

3. Constructor的props类型别用any #

你已经定义了PROPS接口，直接用它就行，别用any，不然TypeScript的类型检查就白做啦。

修正后的完整代码 #

import React, { Component } from 'react';

interface STATE { 
  loading: boolean;
  fruitsData: any[]; // 要是知道水果数据的具体类型，建议换成更精确的类型，比如Fruit[]
};
interface PROPS {};

// 注意泛型顺序：先PROPS，后STATE
export default class App extends Component<PROPS, STATE> {
  constructor(props: PROPS) {
    super(props);
    this.state = { 
      fruitsData : [], 
      loading: false 
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    // 后续的服务调用和数据绑定逻辑可以正常写啦
  }

  // 别忘了加render方法哦，不然组件没法渲染
  render() {
    return (
      <div>
        {this.state.loading ? <p>Loading...</p> : <p>Loaded!</p>}
      </div>
    );
  }
}

额外提醒：依赖版本不匹配 #

看你的package.json，react和react-dom是15.5.4版本，但@types/react和@types/react-dom是16.x版本，这可能会导致一些类型不兼容的问题。建议要么把react和react-dom升级到16.x版本（更推荐，15.x已经很老了），要么把@types/react和@types/react-dom降级到对应15.x的版本（比如@types/react@^15.6.0）。

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