鍍金池/ 問答/HTML/ react+typescript項目中向?qū)ο筇砑右粋€屬性報錯

react+typescript項目中向?qū)ο筇砑右粋€屬性報錯

react中向?qū)ο骴ata添加一個iconImg的字段報錯?
項目使用 (typescript+react)

clipboard.png

import * as React from 'react';
import { Row,Col } from 'antd';
import s from './catalog.less';

interface DashProps {
    userName ?: any;
}
export default class Index extends React.Component<DashProps, any> {
    constructor(props:DashProps) {
        super(props);
        this.state = {
            data:[]
        }
    }
    componentDidMount(){
        // let {data}=this.props;
        let data= [
            {
                title:"考點得分篇",
                content:"內(nèi)容1",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            },
            {
                title:"考點得分篇",
                content:"內(nèi)容2",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            },
            {
                title:"考點得分篇",
                content:"內(nèi)容3",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            }
        ]
        let iconArr=["/src/assets/img/pointIncon.png","/src/assets/img/pointIncon2.png","/src/assets/img/pointIncon3.png"]

        data=data.map((item,index)=>{
            item.iconImg=iconArr[index]
            return item
        })
        this.setState({data})
    }
    render() {
        let {data}=this.state;
        let items=data.map((item,index)=>{
            return (
                    <div key={index} className={s.item}>
                        <div className={s.df}>
                            <span className={s.mr15}><img src={item.iconImg} alt="" className={s.mt5}/></span>
                            <h2 className={s.fx1}>{item.title}</h2>
                        </div>
                        <div className={s.content}>{item.content}</div>
                        <ul className={s.ml40}>
                            {
                                item.point.map((pointItem,pointIndex)=>{
                                    return <li key={pointIndex}>{pointItem}</li>
                                })
                            }
                        </ul>
                    </div>
            )
        })
        return(
            <div className={s.container}>
                {items}
            </div>
        )
    }
}
回答
編輯回答
心沉

clipboard.png
報錯寫的很清楚了 不存在iconImg屬性

 // 手動添加
 let data= [
            {
                title:"考點得分篇",
                content:"內(nèi)容1",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
                iconImg: ''
            }
        ]
  //或者自定義一個接口
    interface T {
        title: string,
        content: string,
        point: array,
        iconImg?: string
    };
    let data: T = [
            {
                title:"考點得分篇",
                content:"內(nèi)容1",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            },
            {
                title:"考點得分篇",
                content:"內(nèi)容2",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            },
            {
                title:"考點得分篇",
                content:"內(nèi)容3",
                point:["勾股定理","反比例函數(shù)圖像性質(zhì)"]
            }
        ]
2018年7月28日 13:13