Реагировать - изменение ключевого свойства не вызывает повторную визуализацию дочернего компонента
Я использую реакция бесконечная прокрутка для рендеринга потока данных. Каждый раз, когда пользователь меняет свои настройки, я хочу обновить ленту данных.
Для этого у меня есть ключевая опора для компонента InfiniteScroll. Идея в том, что всякий раз, когда пользователь меняет свои настройки
this.state.renderCountувеличивается на 1 вsetStateReact замечает, что ключевая опора
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 })
Однако компонент не сбрасывается. Почему это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
key и ref - специальные ключевые слова в react. Видеть
Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component.
For instance, attempting to access this.props.key from a component (i.e., the render function or propTypes) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex:
<ListItemWrapper key = {result.id} id = {result.id} />). While this may seem redundant, it’s important to separate app logic from reconciling hints.
Чтобы передать свойство key дочернему элементу, используйте другое имя.
См. Также: Почему ref не является свойством дочерних компонентов?
Оказывается, я слишком много над этим подумал.
Благодаря тому, как работает response-infinite-scroll, мне просто нужно очистить массив listItems.
В моем случае мне просто нужно было сделать:
this.setState({ templates: [] })
(listItems создается функцией карты, которая сопоставляет шаблоны с jsx).
Я не уверен в этом, но React имеет особую цель для свойства
key, чтобы гарантировать, что братьев и сестер можно однозначно идентифицировать. Возможно, поэтому ваш компонент не обновляется. Я бы попытался использовать другое имя свойства и посмотреть, работает ли оно должным образом.