Typescript spfx error: Property 'news' does not exist on type 'Readonly<{}>

Question

我正在尝试创建一个 spfx 反应组件，它将向浏览器显示 rss 提要。我在游乐场工作，但 spfx 使用打字稿，不确定如何解决下面的类型错误。

RssFeed.ts

import * as React from 'react';
import styles from './RssFeed.module.scss';
import { IRssFeedProps } from './IRssFeedProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as $ from "jquery";
import { string } from 'prop-types';

export default class RssFeed extends React.Component<IRssFeedProps,        
{}> {

constructor(props) {
    super(props);
    this.state = { news: [] };
}

componentDidMount() {
    this.getNews();
}

getNews() {
    $.get(
  "https://www.feed.co.uk/news/feed",
  function(data) {
    var $xml = $(data);
    var items = [];

    $xml.find("item").each(function() {
      var $this = $(this);
      items.push({
        title: $this.find("title").text(),
        link: $this.find("link").text()
        // link: $this.find("link").text(),
      });
    });

    this.setState({ news: items }, function() {
      // callback function to check what items going onto the array
      console.log(this.state.news);
    });
  }.bind(this),
  "xml"
);
}

 public render(): React.ReactElement<IRssFeedProps> {
  return (
  <div className={ styles.rssFeed }>
        {this.state.news.map(item => (
        <div className="panel" key={item.title}>
          <h2 className="panel-title">
            {item.title}
          </h2>
          <span>{item.link}</span>
        </div>
      ))}
  </div>
);
}
}

IRssFeedProps.ts

export interface IRssFeedProps {
description: string;
}

这是错误：错误 - [tsc] src/webparts/rssFeed/components/RssFeed.tsx(47,25)：错误 TS2339：属性 'news' 在类型 'Readonly<{}>'.

上不存在

Answer 1

创建组件时需要添加状态类型：

interface IRssFeedState { news: any[] };

class RssFeed extends React.Component<IRssFeedProps, IRssFeedState> {
...
}

另外，除了 any.

，您通常应该有一个明确定义的类型

Answer 2

您正在为您的组件状态传递一个空接口。

interface ComponentProps{
  firstProp: string;
}

interface ComponentState {
  firstPropsOnState: string;
}

那你就可以这样用了

class MyComponent extends React.Component<ComponentProps, ComponentState> {...}

由于您传递的是一个空接口，TypeScript 会抱怨状态上的消息属性不存在，因为您声明了一个空状态。只需将属性添加到您的界面并在创建组件时将其传递下去，它就会起作用。

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#write-some-code

在文档中，他们没有为状态定义接口的示例，这可能会误导 TypeScript 的新手。您传递的第二个通用类型是您的实际状态。

希望它让你明白了。

Typescript spfx error: Property 'news' does not exist on type 'Readonly<{}>

Typescript spfx error: Property 'news' does not exist on type 'Readonly<{}>

typescript

reactjs

spfx