Typescript,React:TypeError:无法读取未定义的属性“push”
2020-05-29
753
这似乎是一个愚蠢的问题,但是即使在我阅读错误消息并尝试在此处找到此类问题后,我仍无法找出它发生的原因以及我做错了什么
因此,主要目标是将书籍对象添加到库数组中。没有问题,至少现在,应该可以正常工作(console.log 显示一切正常),所有文件中的导出和导入都是正确的,我甚至在 HiddenPanel.tsx 文件中有一些代码片段来使用 Library.ts 中的库方法
错误:TypeError:无法读取未定义的 Function.push../src/Library.ts.Library.addBook src/Library.ts:36 的属性“push”
第 36 行:
Library.library.push(book)
快速问题描述:我无法弄清楚类型的一些问题。按下 ADD 后发生(从 Library.class 中的方法调用 push())
文件: 1. HiddenPanel.tsx 2. Library.ts
我有一个带构造函数的 Book 类(Library.ts)
class Book {
constructor(public author: string, public title: string, public pages: string, public rating: number) {
title = title
author = author
pages = pages
rating = rating
}
}
Book 构造函数调用方法位于 Library 类中(Library.ts)
class Library {
static library: Array<object>
library = [
{
author: 'Johann Fjord Kallenberg',
title: 'Norvegian dragonslayers',
pages: '443',
rating: 4
}, {
author: 'Dungo McCallahey',
title: 'Irish Golden Era',
pages: '318',
rating: 3
}, {
author: 'John Doe Mouse',
title: 'Preparing to fight a Wolfgod',
pages: '714',
rating: 4
}
]
public static addBook = (title: string, author: string, pages: string, rating: number) => {
let book = new Book(title, author, pages, rating)
Library.library.push(book)
console.log(Library.library)
}
}
构造函数正在从 HiddenPanel.tsx 调用
class HiddenPanel extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
author: '',
title: '',
pages: '',
rating: 0,
value: '',
}
}
...some private methods here...
private handleClick = () => {
Library.addBook(this.state.author, this.state.title, this.state.pages, this.state.rating)
}
render() {
return(
<div className="add-book-section">
...some stuff here...
<div onClick={this.handleClick} className="submit">ADD</div>
</div>
)
}
}
2个回答
问题:
如果您阅读注释并运行以下代码片段,将清除问题背后的原因。
class Library {
static library: Array<object> // <-- Declared but not initialized
// ---- this is not static property, this will create a property for class
library = [
{
author: 'Johann Fjord Kallenberg',
title: 'Norvegian dragonslayers',
pages: '443',
rating: 4
}, {
author: 'Dungo McCallahey',
title: 'Irish Golden Era',
pages: '318',
rating: 3
}, {
author: 'John Doe Mouse',
title: 'Preparing to fight a Wolfgod',
pages: '714',
rating: 4
}
]
}
console.log( 'Static Property' , Library.library);
const libObj = new Library();
console.log( 'Instance Property' , libObj.library);
解决方案:
您可以直接使用值初始化它:
class Library {
static library: Array<object> = [
{
author: 'Johann Fjord Kallenberg',
title: 'Norvegian dragonslayers',
pages: '443',
rating: 4
}, {
author: 'Dungo McCallahey',
title: 'Irish Golden Era',
pages: '318',
rating: 3
}, {
author: 'John Doe Mouse',
title: 'Preparing to fight a Wolfgod',
pages: '714',
rating: 4
}
]
}
console.log( 'Static Property' , Library.library);
Vivek Doshi
2020-05-29
尝试像这样定义你的类..
class Library {
static library = [
{
author: 'Johann Fjord Kallenberg',
title: 'Norvegian dragonslayers',
pages: '443',
rating: 4
}, {
author: 'Dungo McCallahey',
title: 'Irish Golden Era',
pages: '318',
rating: 3
}, {
author: 'John Doe Mouse',
title: 'Preparing to fight a Wolfgod',
pages: '714',
rating: 4
}
];
}
bloo
2020-05-29