React / Typescript：类型“ object”上不存在属性“ id”

Question

我从另一个文件导入数据，但是在render()我似乎无法获取属性，例如json data实体的id 。 在调试时，当我将鼠标悬停在id上时，我实际上可以看到其id例如233765，但是由于某种原因，打字稿在代码下方给出了错误。 我的定义哪里出问题了？

 import * as React from 'react'; import * as data from '../../team.json'; interface Props { //props } interface State { nextRacers: Array<object>; jockeys: Array<object>; } export class Race extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { jockeys: data as object as <ArrayObject>, nextRacers: [], }; } render() { const r = this.state.jockeys; const x = r.map((value, i) => { console.log(value.id); }); console.log(x); } } 

我得到一个错误；

属性“ id”在类型“ object”上不存在。

我已经在Google搜索中广泛搜索了很多结果poppin，但似乎无法将逻辑应用于我尝试做的这个简单事情。

Answer 1

属性“ id”在类型“ object”上不存在。

您有jockeys: Array<object>; 更改为jockeys: Array<{id: any}>; 或类似的适当注释。

Answer 2

Typescript推断该value是没有属性id object类型。 骑师（ as object as ）的投射方式似乎也不对。 您应该创建一个Jockey接口来表示jockey数据结构，并使用该类型定义代替object 。

import * as React from 'react';
import * as data from '../../team.json';

interface Jockey {
    id: string;
}

interface Props {
    //props
}

interface State {
    nextRacers: any[];
    jockeys: Jockey[];
}

export class Race extends React.Component<Props, State> {

    state: State;

    constructor(props: Props) {
        super(props);
        this.state = {
            jockeys: data as Jockey[],
            nextRacers: []
        };
    }

    render() {
        const r = this.state.jockeys;
        const x = r.map((value: Jockey, i: number) => {
            console.log(value.id);
        });
        console.log(x);
    }

}