JSX 元素类型“App"不是 JSX 元素的构造函数.属性“setState"的类型不兼容 [英] JSX element type 'App' is not a constructor function for JSX elements. Types of property 'setState' are incompatible

问题描述

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

./src/index.tsx(16,5): 错误 TS2605: JSX 元素类型App"不是 JSX 元素的构造函数.属性setState"的类型不兼容.类型 '{ (f: (prevState: null, props: {}) => Pick, callback?: (() => any) | un...' 是不可分配到类型 '{ (f: (prevState: {}, props: any) => Pick<{}, K>, callback?: (() => any) | undef...'.参数f"和f"的类型不兼容.输入 '(prevState: {}, props: any) =>选择<{}，任意>'不可分配给类型 '(prevState: null, props: {}) =>Pick'.参数prevState"和prevState"的类型不兼容.类型null"不可分配给类型{}".

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

class App extends React.Component<{}, null>{使成为() {返回 (<div className="应用程序">...

);}}ReactDOM.render(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root') 作为 HTMLElement);

我正在使用:

node v6.11.0npm v5.1.0打字稿 v2.4.1反应 v15.6.1Redux v3.7.1react-redux v5.0.5react-scripts-ts v2.3.2

更新:

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

解决方案

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

答案在于@types/react

查看定义, state 和 props 都不应该为 null.

当您将 App 声明为 class App extends React.Component<{}, null>{，你本质上是说，状态是 null 类型".

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

I am using the Microsoft TypeScript-React-Starter and got this compile error during 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 '{}'.

So it seems like my setState function has incorrect signature but I'm not sure how to fix it. Here's my code:

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

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

I am using:

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

Update:

I found out that removing the generic types <{}, null> clears the error. But I'd still love to learn why I was getting the error.

解决方案

TLDR; State cannot be null. Declare a interface for it or declare it {}

Answer lies in @types/react

Looking at the definition, neither state nor props are not intended to be null.

When you declared App as class App extends React.Component<{}, null> {, you essentially said, "state is of type null".

Now the type of setState is dependent on the type you specify for state and it clashed with the lesser known version of the setState api. prevState is declared as a {} (the default, since no interface for state was specified) which is not compatible with null, leading to the error log you saw.

这篇关于JSX 元素类型“App"不是 JSX 元素的构造函数.属性“setState"的类型不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！