Typescript，反應：類型錯誤：無法讀取未定義的屬性“推送”

Question

似乎是一個愚蠢的問題，但即使我閱讀了錯誤消息並試圖在此處找到此類問題，我也無法找出它發生的原因以及我做錯了什么

所以主要目標是將一本書 object 添加到庫數組中。 沒有問題，至少現在應該可以正常工作（console.log 顯示一切正常），所有文件中的導出和導入都是正確的，我什至在 HiddenPanel.tsx 文件中有片段可以使用 Library.ts 中的庫方法

錯誤：TypeError：無法讀取未定義 Function.push../src/Library.ts.Library.addBook src/Library.ts:36 的屬性“推送”

第 36 行：

Library.library.push(book)

快速問題描述：一些我無法弄清楚的類型問題。 在按下 ADD 后發生（從 Library.class 中的方法調用 push()）

文件： 1. HiddenPanel.tsx 2. Library.ts

我有一本帶構造函數的書 class (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
    }     
}

圖書構造函數調用方法位於圖書館 class (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>
        )
    }
}

Answer 1

問題：

如果您閱讀評論並運行以下代碼段，那將清除問題背后的原因。

 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);

Answer 2

嘗試像這樣定義您的 class ..

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
        }
    ];
}