Javascript 第一次使用react。如何将rss项目放入组件中？

这是我第一次使用react。我来自jQuery，我的反应是这感觉像是一个大跳跃。如果有人能帮我重构它，让它像React那样工作，我将永远欠你的债！：）

我正在尝试解析一个RSS提要，在这里我想获取最新的文章标题和链接以呈现到一个组件中

-使用它来获取解析器

在浏览器中查看我的应用程序时，异步函数将rss提要吐出到控制台中，我想这是一个好的开始

    // src/App/index.tsx
    import * as React from 'react';
    import * as Parser from 'rss-parser';
    // Types
    import { string } from 'prop-types';

    let parser = new Parser();

    // blueprint for the properties
    interface Props {
      name: string;
    }

    // Component state
    interface State {
        //feed: any[];
    }


    (async () => {

      let feed = await parser.parseURL('https://www.reddit.com/.rss');
      console.log(feed.title);

      feed.items.forEach((item: { title: string; link: string; }) => {
        console.log(item.title + ':' + item.link)
      });

    })();


    export default class App extends React.Component<Props, State> {
      render() {
        return (
          <div>
            <h1>RSS Feed</h1>
            <div>
              <h1>item.title</h1>
              <a href="">item.link</a>
            </div>
          </div>
        );
      }
    }

//src/App/index.tsx
从“React”导入*作为React；
从“rss解析器”导入*作为解析器；
//类型
从“属性类型”导入{string}；
让parser=newparser（）；
//物业蓝图
界面道具{
名称：字符串；
}
//组分状态
界面状态{
//饲料：任何[]；
}
（异步（）=>{
let feed=wait parser.parseURL（'https://www.reddit.com/.rss');
console.log（feed.title）；
feed.items.forEach（（项：{title:string；link:string；}）=>{
console.log（item.title+'：'+item.link）
});
})();
导出默认类App扩展React.Component{
render（）{
返回(
RSS源
项目名称
);
}
}

如果我理解正确，您需要这样的东西：

export default class App extends React.Component<Props, State> {
    constructor(props: {}) {
         super(props);
         this.state = { feed: [] };
    }

    async componentDidMount() {
        const feed = await parser.parseURL('https://www.reddit.com/.rss');
        this.setState({ feed });
    }

    render() {
        return (
        <div>
            <h1>RSS Feed</h1>
            this.state.feed.map((item, i) => (
                <div key={i}>
                    <h1>item.title</h1>
                    <a href="">item.link</a>
                </div>
            ))
        </div>
        );
    }
}

导出默认类App扩展React.Component{
构造函数（props:{}）{
超级（道具）；
this.state={feed:[]}；
}
异步组件didmount（）{
const feed=await parser.parseURL（'https://www.reddit.com/.rss');
this.setState（{feed}）；
}
render（）{
返回(
RSS源
this.state.feed.map（（项，i）=>(
项目名称
))
);
}
}

如果我理解正确，您需要这样的东西：

export default class App extends React.Component<Props, State> {
    constructor(props: {}) {
         super(props);
         this.state = { feed: [] };
    }

    async componentDidMount() {
        const feed = await parser.parseURL('https://www.reddit.com/.rss');
        this.setState({ feed });
    }

    render() {
        return (
        <div>
            <h1>RSS Feed</h1>
            this.state.feed.map((item, i) => (
                <div key={i}>
                    <h1>item.title</h1>
                    <a href="">item.link</a>
                </div>
            ))
        </div>
        );
    }
}

导出默认类App扩展React.Component{
构造函数（props:{}）{
超级（道具）；
this.state={feed:[]}；
}
异步组件didmount（）{
const feed=await parser.parseURL（'https://www.reddit.com/.rss');
this.setState（{feed}）；
}
render（）{
返回(
RSS源
this.state.feed.map（（项，i）=>(
项目名称
))
);
}
}

我也面临同样的问题，并由此解决。如果不检查“未定义”值。它将向您显示错误，因为react将页面渲染2次，并且在第一次渲染时，您手中有一个未定义的

feed.items

数组

我的index.js文件：

import React from 'react'
import {render} from 'react-dom';

let Parser = require('rss-parser');
let parser = new Parser();
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = { 
      feed: []
     };
  }

  async componentDidMount() {
    const feed = await parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss');
    this.setState(feed)
  }

  render() {
    return (
    <div>      
      
      <h1>Blog Posts</h1>
      
     
      {this.state.items && this.state.items.map((items, i) => (
                <div key={i}>
                    <h1>{items.title}</h1>
                    <a href="">{items.link}</a>
                </div>
      ))}

    </div>
    );
  }
}

render(
  <App />, 
  document.getElementById("root")
)

从“React”导入React
从'react dom'导入{render}；
让Parser=require（'rss-Parser'）；
让parser=newparser（）；
const CORS_PROXY=”https://cors-anywhere.herokuapp.com/";
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
提要：[]
};
}
异步组件didmount（）{
const feed=await parser.parseURL（CORS_PROXY+）https://www.reddit.com/.rss');
此.setState（提要）
}
render（）{
返回(
博客帖子
{this.state.items&&this.state.items.map（（items，i）=>(
{items.title}
))}
);
}
}
渲染(
, 
document.getElementById（“根”）
)

我也面临同样的问题，并由此解决。如果不检查“未定义”值。它将向您显示错误，因为react将页面渲染2次，并且在第一次渲染时，您手中有一个未定义的

feed.items

数组

我的index.js文件：

import React from 'react'
import {render} from 'react-dom';

let Parser = require('rss-parser');
let parser = new Parser();
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = { 
      feed: []
     };
  }

  async componentDidMount() {
    const feed = await parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss');
    this.setState(feed)
  }

  render() {
    return (
    <div>      
      
      <h1>Blog Posts</h1>
      
     
      {this.state.items && this.state.items.map((items, i) => (
                <div key={i}>
                    <h1>{items.title}</h1>
                    <a href="">{items.link}</a>
                </div>
      ))}

    </div>
    );
  }
}

render(
  <App />, 
  document.getElementById("root")
)

从“React”导入React
从'react dom'导入{render}；
让Parser=require（'rss-Parser'）；
让parser=newparser（）；
const CORS_PROXY=”https://cors-anywhere.herokuapp.com/";
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
提要：[]
};
}
异步组件didmount（）{
const feed=await parser.parseURL（CORS_PROXY+）https://www.reddit.com/.rss');
此.setState（提要）
}
render（）{
返回(
博客帖子
{this.state.items&&this.state.items.map（（items，i）=>(
{items.title}
))}
);
}
}
渲染(
, 
document.getElementById（“根”）
)

读取生命周期方法和状态-装载时提取并将数据设置为状态，如果数据以状态存在，则有条件呈现读取生命周期方法和状态-装载时提取并将数据设置为状态，如果数据以状态存在，则有条件呈现