React类组件调用setState报错，且无法设置API返回的状态值

核心错误原因 #

parser.parseURL的回调使用普通函数，导致函数内部的this指向不再是组件实例，调用this.setState时自然会报错。此外代码里还有几处细节问题需要修正。

具体修复步骤 #

1. 修正回调函数的this指向
   把parser.parseURL的回调改成箭头函数，箭头函数会继承外部作用域的this（即组件实例）：

   componentDidMount = () =>{
     let parser = new RSSParser();
     parser.parseURL(`https://7targets.ai/blog/feed.xml`, (err, feed) => {
       if (err) throw err;
       this.setState({items : feed.items});
     });
   }
   

2. 修正render里的错误引用
   render里的console.log(this.items)是错误写法，应该访问状态里的items：

   render() {
     console.log(this.state.items)
     // ...
   }
   

3. 避免随机数超出数组长度
   当前随机数生成逻辑可能超过items数组的实际长度，导致显示undefined，改成根据数组长度生成索引：

   makeTimer() {
     setInterval(() => {
       // 仅当数组有内容时生成随机数
       if (this.state.items.length > 0) {
         let rand = Math.floor(Math.random() * this.state.items.length);
         this.setState({ number: rand });
       }
     }, 1000);
   }
   

4. 处理数据加载前的undefined状态
   渲染时加判断，避免API数据未返回时显示undefined：

   render() {
     const currentItem = this.state.items[this.state.number];
     return (
       <div>
         <h1>Random Item: {currentItem ? currentItem.title : 'Loading...'}</h1>
       </div>
     );
   }
   

完整修复后的代码 #

import React, { Component } from "react";
import RSSParser from "rss-parser";

class BlogFeed extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      number: 0,
      items:[],
      feed:[]
    };
    this.makeTimer();
  }

  makeTimer() {
    setInterval(() => {
      if (this.state.items.length > 0) {
        let rand = Math.floor(Math.random() * this.state.items.length);
        this.setState({ number: rand });
      }
    }, 1000);
  }

  componentDidMount = () =>{
    let parser = new RSSParser();
    parser.parseURL(`https://7targets.ai/blog/feed.xml`, (err, feed) => {
      if (err) throw err;
      this.setState({items : feed.items});
    });
  }

  render() {
    console.log(this.state.items)
    const currentItem = this.state.items[this.state.number];
    return (
      <div>
        <h1>Random Item: {currentItem ? currentItem.title : 'Loading...'}</h1>
      </div>
    );
  }
}

export default BlogFeed;

内容的提问来源于stack exchange，提问作者Tanvesh