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)
(或<any, any>
)来找出答案。
你是对的。 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-native 0.57+ 上为 react-relay(经典)配置 babel