Ошибка SPFX Typescript: свойство 'news' не существует для типа 'Readonly ‹{}›

Я пытаюсь создать компонент реакции 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 ‹{}>'.


reactjs typescript spfx
person BennKingy    schedule 29.09.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы передаете пустой интерфейс для состояния вашего компонента.

interface ComponentProps{
  firstProp: string;
}

interface ComponentState {
  firstPropsOnState: string;
}

тогда вы могли бы использовать это так

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

Поскольку вы передаете пустой интерфейс, TypeScript будет жаловаться, что свойство news в состоянии не существует, потому что вы объявили пустое состояние. Просто добавьте это свойство в свой интерфейс и передайте его при создании компонента, и он будет работать.

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

В документации нет примера определенного интерфейса для состояния, который может ввести в заблуждение новичков в TypeScript. Второй общий тип, который вы передаете, - это ваше фактическое состояние.

Надеюсь, это прояснило вам ситуацию.

person Mikhail Korotkov    schedule 29.09.2019

arrow_upward
0
arrow_downward

При создании компонента нужно добавить в набор состояния:

interface IRssFeedState { news: any[] };

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

Кроме того, обычно у вас должен быть четко определенный тип, отличный от any.

person El Aoutar Hamza    schedule 29.09.2019