Повторно используемый компонент реакции с Canvas не отображает canvas с его реквизитом

Question

Я пытаюсь создать повторно используемый компонент с состоянием (он не должен быть функциональным). Мне нужно добавить этот компонент во время выполнения, поэтому в моем приложении у меня есть массив компонента (CanvasComponent) в моем состоянии, чтобы отобразить список компонентов. Я также генерирую случайный размер для отображения размера холста. Проблема возникает, когда я создаю второй холст, странно, это только один раз. У меня есть эта проблема в ChartJS, и поскольку моя кодовая база очень большая, я решил упростить ее на примере.

---

Однако, если вы раскомментируете CanvasComponent в массиве, он работает отлично.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import CanvasComponent from './CanvasComponent';

class App extends React.Component {

  state = {
    canvasList: [
      // <CanvasComponent size={30}></CanvasComponent>, 
      // <CanvasComponent size={50}></CanvasComponent>
    ]
  }


  handleClick = () => {

    const size = Math.floor(Math.random() * (100 - 50 + 1) + 50);
    const newCanvas = <CanvasComponent size={size}></CanvasComponent>

    this.setState({
      canvasList: [newCanvas, 
          ...this.state.canvasList]
  })

  }



  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Add canvas</button>

        { this.state.canvasList.map((item, i) => {
            return <CanvasComponent {...item.props} key={i}></CanvasComponent>
        })}

      </div>
    );
  }
}

export default App;

И компонент

import React from 'react'

class CanvasComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myCanvas = React.createRef();
    }

    componentDidMount() {
      const ctx = this.myCanvas.current.getContext('2d');
      ctx.fillRect(0, 0, 100, 100);
    }

    render() {
        console.log(this.props);
      return (
        <div>
            <p>Size should be {this.props.size}</p>
            <canvas ref={this.myCanvas} width={this.props.size} height={this.props.size} />
        </div>
      )
    }
}

export default CanvasComponent

Answer 1

Я считаю, что ваша проблема заключается в том, что вы визуализируете компоненты холста программно. Если что-то не присутствовало при первой загрузке страницы, то слушатели событий не ищут его активно.

Я уверен, что есть более элегантное решение, чем у меня, но я склонен обойти эту проблему, написав что-тоlike.

state={ updated: false}


componentDidMount(){
this.setState({updated:true})
}

Обновление состояния вызывает повторную визуализацию, и слушатели событий будут знать, что следует обратить внимание на соответствующий компонент.

Answer 2

Проблема была здесь, я поделюсь здесь, если у кого-то была такая же проблема, может найти ее.

Вместо

   this.setState({
      canvasList: [newCanvas, 
          ...this.state.canvasList]
   })

Вы должны написать

   this.setState({
      canvasList: [...this.state.canvasList, 
         newCanvas]
   })

Я до сих пор не знаю, почему, но это решило проблему.