【问题标题】:error TS2339: Property 'items' does not exist on type 'Readonly<{}>'. usnig react in SPX错误 TS2339:“只读<{}>”类型上不存在属性“项目”。在 SPX 中使用反应
【发布时间】:2026-02-16 20:05:02
【问题描述】:

我正在使用 react 解决 SPFX 问题,但我不断收到错误消息:- 错误 - 打字稿 - src\webparts\reactReadWebpart\components\ReactReadWebpart.tsx(101,25):错误 TS2339:“只读”类型上不存在属性“项目”。 看下面的截图

export 
default class
ReactReadWebpart
extends 
React.Component<IReactReadWebpartProps, {}> {

  public
constructor(props:
IReactReadWebpartProps,
state:
IReactReadWebpartState){ 

    super(props); 

    this.state
= {  

      items: [ 

        { 

         
"EmployeeName":
"", 

         
"EmployeeId":
"", 

         
"Experience":"", 

         
"Location":""

        } 

      ]  

    };  

  } 

state.items 下面的错误

{this.state.items.map(function(item,key){ 

              

              
return (<div
className={styles.rowStyle}
key={key}> 

                  
<div
className={styles.CellStyle}>{item.EmployeeName}</div> 

                  
<div
className={styles.CellStyle}>{item.EmployeeId}</div> 

<div
className={styles.CellStyle}>{item.Experience}</div>

<div
className={styles.CellStyle}>{item.Location}</div>

        

                
</div>); 

             })} 

提前致谢

【问题讨论】:

    标签: reactjs spfx


    【解决方案1】:

    在你的问题中设置一流的代码格式,你会得到错误,因为组件的状态在这一行被描述为一个空对象

    React.Component<IReactReadWebpartProps, {}> 
    

    所以你可能应该定义它,以便打字稿知道会发生什么。包含items 字段的某些类型或接口也可以。

    【讨论】:

    • 谢谢丹尼尔,但我已经有了这个接口导出接口 IReactReadWebpartState{ items:[ { "EmployeeName": "", "EmployeeId": "", "Experience":"", "Location":" " }] } 如果你能提供帮助,这还是很新的
    • 嗨!很好!您的界面并不完全正确,应该类似于 interface Item { EmployeeName: string; EmployeeId: string } interface IReactReadWebpartState { items: Item[]; } 。然后你必须将它作为你的类React.Component&lt;IReactReadWebpartProps, IReactReadWebpartState&gt; 的第二个泛型类型参数提及。此外,通常建议不要将 I 放在 typescript 中的接口前面,因为它并没有真正为它们添加任何额外的含义!祝你好运!
    • 谢谢丹尼尔。会试一试
    最近更新 更多