Question

我正在尝试创建一个spfx react组件，该组件将向浏览器显示rss feed。我在操场上工作，但是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：类型“ Readonly <{}>”上不存在属性“ news”。

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将抱怨state的news属性不存在，因为您声明了空状态。只需将该属性添加到您的界面中，然后在创建组件时将其传递给它即可。

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

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

希望它为您弄清楚了。

Typescript spfx错误：类型'Readonly <{}>不存在属性'news'

2 个答案: