React中无法将REST API返回的JSON对象推入空数组问题求助

先直接说核心问题：你遇到的Cannot read property 'saved' of undefined报错，根源是类方法的this指向错误，再加上你对React state的更新方式理解有误，我们一步步来解决：

1. 为什么会出现this undefined的错误？ #

在React类组件中，类定义的方法（比如你的saved()）默认不会自动绑定组件实例的this。当你在按钮的onClick={this.saved}中直接引用这个方法时，点击触发时this会变成undefined（严格模式下），所以自然找不到组件实例的相关属性。

2. 修复步骤与代码调整 #

步骤1：绑定类方法的this #

最适合新手的方式是用箭头函数定义类方法，这样this会自动绑定到组件实例，省去手动绑定的麻烦：

// 把原来的saved()改成箭头函数，同时接收当前点击的文章参数
saved = (post) => {
  // 正确更新state中的saved数组
  this.setState(prevState => ({
    // 用扩展运算符创建新数组，不要直接修改原state
    saved: [...prevState.saved, post]
  }));
  alert('文章已保存！');
}

// 同理，你的onError方法也要绑定this，不然触发时也会报错
onError = () => {
  this.setState({ imageUrl: "../assets/img-error.jpg" })
}

步骤2：传递当前点击的文章到saved方法 #

你原来的代码里想把this.headline（整个文章数组）推入saved，但显然你是想保存当前点击的那篇文章，所以需要在点击时把当前的post传进去：

// 在map循环的按钮中修改onClick逻辑
<button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Add this article</button>

步骤3：正确更新React State #

React的state是不可变的，不能直接用this.state.saved.push()修改原数组，必须创建新数组再通过setState更新。上面的代码中用[...prevState.saved, post]创建了包含旧数据和新文章的新数组，同时用prevState确保拿到最新的state（因为setState是异步的）。

3. 关键优化后的代码片段 #

class NewsHero extends Component {
  state = {
    loading: false,
    data: [],
    headline: [],
    saved: [],
    imageUrl: "" // 记得初始化imageUrl，避免onError时出错
  }

  // 箭头函数自动绑定this，接收当前文章参数
  saved = (post) => {
    this.setState(prevState => ({
      saved: [...prevState.saved, post]
    }));
    alert('Article saved successfully!');
  }

  // 同样用箭头函数绑定this
  onError = () => {
    this.setState({ imageUrl: "../assets/img-error.jpg" })
  }

  componentDidMount() {
    this.setState({ loading: true })
    fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=8')
      .then(res => res.json())
      .then(data => this.setState({ headline: data.articles, loading: false }, () => console.log('加载的文章：', data.articles)))
      .catch(err => console.error('请求失败：', err)) // 新增错误捕获，避免控制台报错
  }

  render() {
    return (
      <div className="hero">
        <h2 className="text-left">News</h2>
        {/* 新增已保存文章数量的调试显示 */}
        <p className="text-right">已保存 {this.state.saved.length} 篇文章</p>
        {this.state.loading ? "loading..." : (
          <div>
            <Carousel
              // ... 轮播配置不变
            >
              {this.state.headline.map((post, indx) => {
                return (
                  <div className="text-left mt-5" key={indx}>
                    <img 
                      className="media-img card-img-top card-img-hero" 
                      src={post.urlToImage || this.state.imageUrl} // 增加图片加载失败的 fallback
                      alt="Article cover"
                      onError={this.onError}
                    ></img>
                    <div className="card-body container hero-text-body">
                      <h1 className="card-title hero-title text-truncate">{post.title}</h1>
                      {/* 修改后的点击事件，传递当前文章 */}
                      <button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Add this article</button>
                      <p className="card-text">{post.description}</p>
                      <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                    </div>
                  </div>
                )
              })}
            </Carousel>
          </div>
        )}
      </div>
    )
  }
}

额外提示 #

• 给fetch添加catch处理请求失败的情况，能帮你快速排查API请求的问题。
• 图片的onError事件绑定后，记得初始化imageUrl状态，这样图片加载失败时能正确显示备用图。
• 新增的已保存文章数量显示可以帮你快速验证功能是否正常工作，调试完成后可以根据需求保留或删除。

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