Как заставить React класс перезапустить render( )?

Question

[nickname13384]

Как заставить react перезапустить render?
Пробовал использовать this.forceUpdate() - не работает, или я неправильно его использую.

componentDidUpdate(prevProps, prevState) {
  if(this.props.resetRender === true){
  	console.log(this.props.resetRender) // true
  	this.forceUpdate()
  }
}

Выдает ошибку:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

[Robur]

после render вызывается componentDidUpdate в котором вы вызываете render, после которого вызывается componentDidUpdate в котором... Идея я думаю ясна.

Если вам надо перерисовать компонент когда родитель меняет resetRender на true, перенесите этот код в 'componentWillUpdate'

А вообще родитель не должен форсить рендер таким образом. Если сильно хочется - сделайте метод rerender () { this.forceUpdate() } и дергайте его из родителя где нужно напрямую. или просто дергайте child.forceUpdate(). Это будет так же плохо, но немного меньшее извращение и работать будет как часы.

Comments

[nickname13384]

Только сейчас заметил, компонент перерисовывается а state не сбрасывается в исходное состояние

В компоненте по клику на кнопку загружаются (добавляются) новые списки пользователей, мне нужно чтобы список пользователей возвращался к исходному

[Robur]

Ничего не понятно. В каком компоненте, что за исходный список, когда сбрасывался.
Вам нужно сделать рендер на основе списка пользователей, список поменялся, рендер отрисовал все заново.
Для этого список передаете через props, и меняете props его снаружи когда загрузился, что автоматически вызовет рендер, либо кладете в стейт и обновляете вызовом setState, если загрузка происходит в том же компоненте где список рисуется. Ничего другого изобретать не нужно.

[nickname13384]

Robur,

class UsersList extends Component {

apiClient = new ApiClient();

constructor(props) {
		super(props)
		this.state = {
			usersList: [],
			nextUrl: '',
			page: 1,
			total_pages: 0,
		}
}

componentDidMount() {
		this.apiClient
		.getUsers()
		.then((response) => {
    	return response;
 		 })
		.then((data )=> {
				this.setState({
						usersList: data.users,
						nextUrl: data.links.next_url,
						total_pages: data.total_pages
				})
					})
}

componentWillUpdate() {
  if(this.props.resetUsers ===true){
  	console.log(this.props.resetUsers)
  	this.forceUpdate()
  }
}

showMoreUsers = () => {
		 fetch(this.state.nextUrl)
		 .then(response =>response.json())
			.then(response => {
				this.setState(({usersList, nextUrl, page}) => {
					const _next = response.links.next_url;
					const _page = response.page;
					const newArr = [...usersList, ...response.users];
					return  {usersList: newArr,
										nextUrl: _next,
										page: _page}
				})
			})
}

render() {

[Robur]

Если хочется обнулить список чтобы не было ни одного пользователя - это и нужно делать, через setState(). для этого лучше сделать отдельную функцию как я описал выше.
Если просто перерисовать компонент без изменения данных в нем - он нарисует то же самое что и было. Можно хоть миллион раз это сделать - пользователи никуда не денутся.

[nickname13384]

Robur, спасибо, я попробую так сделать