JSX 元素类型“App”不是 JSX 元素的构造函数。属性“setState”的类型不兼容

IT技术 reactjs typescript2.0
2021-05-09 21:13:20

我正在使用Microsoft TypeScript-React-Starter并在以下期间遇到此编译错误npm start

./src/index.tsx
(16,5): error TS2605: JSX element type 'App' is not a constructor function for JSX elements.
  Types of property 'setState' are incompatible.
    Type '{ <K extends never>(f: (prevState: null, props: {}) => Pick<null, K>, callback?: (() => any) | un...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: (() => any) | undef...'.
      Types of parameters 'f' and 'f' are incompatible.
        Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: null, props: {}) => Pick<null, any>'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'null' is not assignable to type '{}'.

所以看起来我的setState函数签名不正确,但我不知道如何修复它。这是我的代码:

class App extends React.Component<{}, null> {
  render() {
    return (
      <div className="App">
        ...
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

我在用:

node v6.11.0
npm v5.1.0
typescript v2.4.1
react v15.6.1
redux v3.7.1
react-redux v5.0.5
react-scripts-ts v2.3.2

更新:

我发现删除泛型类型会<{}, null>清除错误。但我仍然很想知道为什么我会收到错误。

2个回答

TLDR;状态不能为空。为其声明一个接口或声明它{}

答案在于@types/react

查看定义,无论 state 还是 props 都不打算为 null。

当你宣称Appclass App extends React.Component<{}, null> {,你本质上说,“状态的类型是空的”。

现在的类型setState取决于您为 state 指定的类型,并且它与鲜为人知的 setState api 版本发生冲突prevState被声明为与 null 不兼容的 {}(默认值,因为没有指定状态接口),导致您看到错误日志。

也许此修复程序是不相关的,但我得到了同样的错误信息,而无需<{}, null>经过class App extends React.Component这是我的情况的修复。

改变 import React from 'react';

import * as React from 'react';