Реакция - изменение ключевого свойства не вызывает повторного рендеринга дочернего компонента

Question

Я использую response-infinite-scroll для визуализации потока данных.Всякий раз, когда пользователь изменяет свои настройки, я хочу обновить поток данных.

Для этого у меня есть ключевая опора для компонента InfiniteScroll.Идея заключается в том, что всякий раз, когда пользователь изменяет свои настройки,

1. this.state.renderCount увеличивается на 1 в setState

2. Реагирует на то, что ключевая опора InfiniteScroll отличаетсяи повторно выполняет рендеринг компонента с нуля.

     <Content style={{ padding: "0px 20px" }}>
       <InfiniteScroll
         key={this.state.renderCount}
         style={{ width: "100%", height: "100%" }}
         pageStart={0}
         loadMore={this.loadPosts.bind(this)}
         hasMore={true}
         loader={<div>Loading....</div>}
         useWindow={false}
       >
         {listItems}
       </InfiniteScroll>
     </Content>
   

Код обновления находится в componentDidUpdate и вызывается, если я определяю, что требуется обновление:

  this.setState({ renderCount: this.state.renderCount + 1 })

Однако компонент не сбрасывается.Почему это?

Answer 1

Оказывается, я обдумывал это.

Благодаря тому, как реагирует бесконечная прокрутка, мне просто нужно очистить массив listItems.

В моем случае мне просто нужно было сделать:

  this.setState({ templates: [] })

(listItems генерируется функцией карты, которая отображает шаблоны в jsx).

Answer 2

key и ref - это специальные ключевые слова в реакции. См.

Большинство реквизитов в элементе JSX передаются компоненту, однако есть два специальных реквизита (ref и key), которые используются в React, и поэтомуне пересылается компоненту.

Например, попытка доступа к this.props.key из компонента (т. е. функции рендеринга или propTypes) не определена.Если вам нужно получить доступ к одному и тому же значению в дочернем компоненте, вы должны передать его как другой объект (например: <ListItemWrapper key={result.id} id={result.id} />).Хотя это может показаться излишним, важно отделить логику приложения от согласования подсказок.

Чтобы передать их key prop дочернему элементу, используйте другое имя.

См. Также: Почему ref не является свойством дочерних компонентов?