Блог

Главная - Вопросы по программированию - Дочерний элемент с useEffect() не обновляется при изменении родительского состояния

Дочерний элемент с useEffect() не обновляется при изменении родительского состояния

#reactjs

#reactjs

Вопрос:

В моем родительском компоненте:

 <div>
  <h3>Option <span>{this.state.currentOption   1}</span> of <span>{this.state.options}</span></h3>
  <Button onClick={this.handleOption} variant="primary" type="submit">
    {` Next >>`}
  </Button>
</div>

Я вызываю перехват:

 handleOption = event => {
  event.preventDefault();
  let option = this.state.currentOption;
  const numOptions = this.state.stackOptions.length;
  if (  option >= numOptions) {
    option = 0;
  } 
  this.setState({
    currentOption: option,
  });
}

Который я хочу циклически перебирать массив объектов для рендеринга в Canvas:

 import React, { useRef, useEffect } from 'react'

const StackRender = props => {
  
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    renderOption(props.name, canvas)
  }, [])
  
  return <canvas ref={canvasRef} {...props}/>
}

однако дочерний компонент (холст) не обновляется при изменении родительского состояния.

Комментарии:

1. @gavgrif да, проблема с редактированием, я сбросил фигурную скобку. Я обновил выше

2. useEffect У вас пустой массив зависимостей. Это означает, что он будет выполняться только один раз, когда компонент изначально отображается, и никогда больше. Вы упоминаете, что вызываете «перехват» (который на самом деле является просто функцией, а не перехватом), в котором вы хотите вызвать повторный запуск, StackRender но я не уверен, как связаны эти два компонента. Вы ожидаете этого из-за props.name изменений? Основано ли это option на состоянии in?

Ответ №1:

Добавьте props.name в массив useEffect зависимостей, чтобы функция вызывалась при props.name каждом изменении:

   useEffect(() => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    renderOption(props.name, canvas)
  }, [props.name])

Комментарии:

1. Что, если я не знаю никаких ключей массива?