React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object

Posted

技术标签:

【中文标题】React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object or null: undefined【英文标题】: 【发布时间】:2018-01-14 02:16:17 【问题描述】:

在尝试实例化扩展 Relay.Mutation 的类时,我遇到了一个非常奇怪的 TypeError 和 react-relay。我用create-react-app my-app --scripts-version=react-scripts-ts 创建了一个简单的Typescript 项目来演示这个问题。

每当我运行 yarn start 时,我看到的都是这样的:

这个错误对我来说真的没有意义: TypeError: Object prototype may only be an Object or null: undefined

我只是想实例化我自己的扩展Relay.Mutation 类的新实例。总的来说,我对 React Relay 世界和 ES6/Typescript 真的很陌生,所以我可能只是想念一些愚蠢的东西。

在这个简单的项目中,我直接使用DefinitelyTyped repository 中定义的示例类。

难道我不能像这样使用这个类吗:

const atm = new AddTweetMutation( text: 'asdf', userId: '1123' );

AddTweetMutation.tsx 类如下所示:

import * as Relay from 'react-relay';

interface Props 
  text: string;
  userId: string;


interface State 


export default class AddTweetMutation extends Relay.Mutation<Props, State> 

  public getMutation() 
    return Relay.QL`mutationaddTweet`;
  

  public getFatQuery() 
    return Relay.QL`
            fragment on AddTweetPayload 
                tweetEdge
                user
            
        `;
  

  public getConfigs() 
    return [
      type: 'RANGE_ADD',
      parentName: 'user',
      parentID: this.props.userId,
      connectionName: 'tweets',
      edgeName: 'tweetEdge',
      rangeBehaviors: 
        '': 'append',
      ,
    ];
  

  public getVariables() 
    return this.props;
  

这是整个Hello.tsx React 组件:

import * as React from 'react';
import AddTweetMutation from '../mutations/AddTweetMutation';

export interface Props 
  name: string;
  enthusiasmLevel?: number;


class Hello extends React.Component<Props, > 
  render() 

    const atm = new AddTweetMutation( text: 'asdf', userId: '1123' );
    console.log(atm);

    const  name, enthusiasmLevel = 1  = this.props;

    if (enthusiasmLevel <= 0) 
      throw new Error('You could be a little more enthusiastic. :D');
    

    return (
      <div className="hello">
        <div className="greeting">
          Hello name + getExclamationMarks(enthusiasmLevel)
        </div>
      </div>
    );
  


export default Hello;

// helpers

function getExclamationMarks(numChars: number) 
  return Array(numChars + 1).join('!');

这就是我的package.json 的样子:


  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@types/jest": "^20.0.6",
    "@types/node": "^8.0.19",
    "@types/react": "^16.0.0",
    "@types/react-dom": "^15.5.2",
    "@types/react-relay": "^0.9.13",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-relay": "^1.1.0",
    "react-scripts-ts": "2.5.0"
  ,
  "devDependencies": ,
  "scripts": 
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  

Here's the project to github

更新:输入当前对 react-relay > 1.x 无效。请参阅thread on github for this issue。我还使用解决方法更新了我的存储库。

【问题讨论】:

检查Relay.Mutation是否真的存在。库的版本和类型不匹配。做一个console.log('relay.mutation', Relay.Mutation)(或&lt;any, any&gt;)来找出答案。 你是对的。 Relay.Mutation 返回未定义。似乎没有与库版本匹配的类型。解决此问题的正确方法是什么?为什么突变不再存在?抱歉,Typescript 超级新手,只是想找出一个可行的策略。 我假设它与 React v15.5 相关:facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html facebook.github.io/relay/docs/… --- 如果我降级到:"react-relay": "^0.9.*""@types/react-relay": "^0.9.13" 我可以克服错误,但现在我收到警告:lowPriorityWarning.js:40 警告:通过访问 PropTypes主要的 React 包已弃用......我没有看到最新版本的明显解决方案??? 【参考方案1】:

问题是react-relay@1.1.0 改变了它的API,@types/react-relay@0.9.13 已经过时了。

TypeScript 根据可用的类型(类型定义)静态分析您的代码。所以即使你@types/react-relay@0.9.13 已经过时了,TypeScript 也不知道,只是根据它采取行动。

要解决此问题,您可以:

在https://github.com/DefinitelyTyped/DefinitelyTyped 向@types/react-relay 贡献代码以更新其类型 在https://github.com/DefinitelyTyped/DefinitelyTyped 上提交问题,看看是否有人可以帮助更新打字。 使用“模块扩充”(https://www.typescriptlang.org/docs/handbook/declaration-merging.html) 自己在本地更新类型 不使用@types/react-relay 并使用declare module "react-relay" 将其标记为any 类型(您将失去类型安全性和IDE 支持,但如果类型不正确,无论如何也没关系)。李>

对于最后一个选项,请执行以下操作:

// custom-typings/react-relay.d.ts
declare module 'react-relay'

// tsconfig.json

  "include": [
    "custom-typings"
  ]

【讨论】:

谢谢。这很有帮助!

以上是关于React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object的主要内容,如果未能解决你的问题,请参考以下文章

React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object

如何将 react-relay 组件添加到故事书中?

如何在 react-native 0.57+ 上为 react-relay(经典)配置 babel

制作一个高阶组件以与 TypeScript 互操作 react-relay 和 react-router

如何进行示例 GraphQL Relay 突变

如何处理 Relay Modern 上的突变错误?