Реакция сохранения состояния предыдущего компонента и рендеринг нового состояния - PullRequest
Новая
       9

Реакция сохранения состояния предыдущего компонента и рендеринг нового состояния

0 голосов
/ 04 марта 2019

Я работаю над новостным приложением, в котором я вызываю 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 Gist для второй карты первая карта получает суть второй карты.Как предотвратить это? (Рисунок 3)

До сих пор я пытался использовать метод жизненного цикла componentDidUpdate для сравнения состояний и сохранения состояния для первой карты, но я не могу это выяснить.

Любые указатели?

b0b1b2

1 Ответ

0 голосов
/ 04 марта 2019

Вам нужно будет каким-то образом добавить связь 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, если URL для текущего элемента новостей совпадает с URL для сводки.

Затем метод 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 будет иметь свое резюме как часть своего собственного состояния и будет получать резюме при нажатии.Таким образом, не возникнет путаницы в отношении того, к какой новости относится резюме.Это также может помочь очистить ваш родительский компонент, делегируя задачи / данные дочерним элементам по мере роста компонента.

...