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);
  })

}

但是我在这个问题上陷入了困境，因此在第二张卡上调用gist API时，第一张卡获得了第二张卡的要旨。如何防止这种情况发生？（图3）

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

有指针吗？

Answer 1

您需要以某种方式将import numpy as np a = np.array([2,15,66,180]) print(a.dtype) #int64 out = np.hstack([np.arange(a[i],a[i+1],25) for i in range(len(a)-1)]+[a[-1:]]) print(out) #[ 2 15 40 65 66 91 116 141 166 180] print(out.dtype) #int64 数据与正确的新闻项目相关联。当前，您的程序仅将当前的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> 传递给this.state.summary。

然后将NewsCard方法更新为：

handleDetailClick

您可能要考虑的另一种方法是将第二个API调用传递给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); }) } 组件。因此，每个NewsCard都将其摘要作为其自身状态的一部分，并在单击时获取摘要。这样就不会混淆摘要属于哪个新闻项。随着组件的增长，将任务/数据委托给子组件也可以帮助清理父组件。