React 保持前一个组件的状态并渲染新的状态

Question

我正在开发一个新闻应用程序，我在其中调用 API 并显示热门新闻的卡片。（图 1）

  <div style={{display: 'flex', flexWrap: 'wrap', padding: 20, alignItems: 'center', justifyContent: 'center' }}>
      {this.state.news.map(news => (
        <NewsCard
          key={news.url}
          _id={news.url}
          description={news.description}
          image={news.urlToImage}
          source={news.source.name}
          title={news.title}
          summary={this.state.summary}
          onExpand={this.handleDetailClick.bind(this, news.url)}
          onSave={this.handleDetailClick.bind(this, news.url)}
        />
    ))}
    </div>

在扩展卡片时，它会在调用第二个 API 后显示文章的要点。（图 2）

  handleDetailClick = link => {
// console.log('hadle detail', link);
API.summarize(link)
  .then((res) => {
    // console.log(res.body);
    this.setState({
      summary: res.body
    })
    // console.log(this.state.summary);
  })

}

但是我被困在这个问题上，因此在第二张卡上调用要点 API 时，第一张卡会获取第二张卡的要点。如何防止这种情况发生？（图 3）

到目前为止，我已经尝试使用 componentDidUpdate 生命周期方法来比较状态并保持第一张卡的状态持久，但我无法弄清楚这一点。

任何指针？

Answer 1

您需要以某种方式将summary 数据与正确的新闻项目相关联。目前您的程序只是将当前的summary 提供给所有NewsCard 组件。

使用当前代码执行此操作的最简单方法是将摘要来自的 url 也记录在主组件（NewsCard 组件的父级）状态中。然后只将摘要传递给正确的新闻项目。

例如（将summaryUrl 添加到state）（注意summary= 行）：

<div style={{display: 'flex', flexWrap: 'wrap', padding: 20, alignItems: 'center', justifyContent: 'center' }}>
  {this.state.news.map(news => (
    <NewsCard
      key={news.url}
      _id={news.url}
      description={news.description}
      image={news.urlToImage}
      source={news.source.name}
      title={news.title}
      summary={news.url === this.state.summaryUrl ? this.state.summary : ""}
      onExpand={this.handleDetailClick.bind(this, news.url)}
      onSave={this.handleDetailClick.bind(this, news.url)}
    />
))}
</div>

因此，如果当前新闻条目的 url 与摘要的 url 匹配，我们只会将 this.state.summary 传递给 NewsCard。

那么handleDetailClick方法应该更新为：

handleDetailClick = link => {
  // console.log('hadle detail', link);
  API.summarize(link)
  .then((res) => {
      // console.log(res.body);
    this.setState({
     summary: res.body,
     summaryUrl: link,
    })
    // console.log(this.state.summary);
  })

}

您可能会考虑这样做的另一种方法是将第二个 API 调用传递给 NewsCard 组件。因此，每个NewsCard 都会将其摘要作为其自身状态的一部分，并在单击时获取摘要。这样就不会混淆摘要属于哪个新闻项目。随着组件的增长，它还可以通过将任务/数据委派给子组件来帮助清理父组件。