所选图像未显示在画布上

我正在开发一个应用程序，用户可以从提供的图像列表中选择图像。当用户单击列表中的图像时，所选图像应作为背景显示在画布上。我正在使用reactjs、redux 和fabricjs 开发它。

当我这样做时，我没有得到选定的图像 this.props.getSelectedImage.image.image 这样我就可以更新 设置画布背景。

图像列表.js

class Images extends React.Component {
  renderImages() {
    const { images, selectImage } = this.props;
    return _.map(images, (image, key) =>
      <li key={key}>
        <img
          src={image.image}
          alt={image.id}
          className="responsive-img default-images"
          width="400px"
          onClick={() => selectImage(image)}
        />
      </li>
    );
  }
  render() {
    return (
      <ul className="image-list">
        {this.renderImages()}
      </ul>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    images: state.images
  }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ selectImage: selectImage }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Images);

动作.js

export function selectImage(image) {
  return {
    type: 'SELECT_IMAGE',
    payload: image
  }
}

减速器.js

const initialState = {
  selectedImage: require('./img/image1.jpg')
};

export function getSelectedImage(state = initialState, action) {
  switch (action.type) {
    case 'SELECT_IMAGE':
      return Object.assign({}, state, { selectedImage: action.payload.image })
    default:
      return state;
  }
}

图像板.js

class ImageBoard extends React.Component {
  constructor() {
    super();
    this.state = {
      canvas: undefined,
      selected: undefined
    };
  }

  componentDidMount() {
    const canvas = new fabric.Canvas('canvas');
    this.setCanvasBackground(this.props.getSelectedImage.selectedImage, canvas);
  }

  setCanvasBackground(image, canvas) {
    canvas.setBackgroundImage(image, function(e) {
    let iw = canvas.backgroundImage.width,
          ih = canvas.backgroundImage.height,
          cw = canvas.getWidth(),
          ch = canvas.getHeight();

    let iar = iw/ih,
      car = cw/ch;

    let nw = cw,
      nh = ch;

    if (iar > car){
      nh = ch;
      nw = nh * iar;
    }
    else if (iar < car){
      nw = cw;
      nh = cw/iar;
    }
    canvas.backgroundImage.width = nw;
    canvas.backgroundImage.height = nh;
    canvas.renderAll();
    }.bind(this));
  }

  render() {
    return(
      <div className="image-board">
         <canvas
           id="canvas"
           className="z-depth-1"
           width={600}
           height={400}
         />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('state', state);
  return {
    images: state.images,
    getSelectedImage: state.getSelectedImage
  }
};

export default connect(mapStateToProps)(ImageBoard);

现在我可以显示默认图像，但当单击列表中的图像时无法更改画布中的背景图像。但是当我放置console.log('image selected', this.props.getSelectedImage.image.image);在渲染函数内，我获取了选定的图像，但无法在 setBackgroundImage 上设置它，因此我可以在画布上显示选定的图像。

我怎样才能这样做？

已使用react v15.4.2

UPDATE

componentDidUpdate() {
    console.log('componentDidUpdate');
    const canvas = new fabric.Canvas('canvas');
    this.setCanvasBackground(this.props.getSelectedImage.selectedImage, canvas);
  }

如果我使用 componentDidUpdate 生命周期方法，它可以工作，但我得到以下结果。重新创建了很多画布，我知道它是因为我在 componentDidUpdate 中创建了一个画布对象来更新画布。我怎样才能清楚地做到这一点？

我看到两个可能的解决方案：

• 从 DOM 中删除旧画布（这样你就只有新画布）：

如何销毁/重新加载 html 5 中的画布？ https://stackoverflow.com/questions/18456160/how-to-destroy-reload-the-canvas-in-html-5

componentDidUpdate() {
    console.log('componentDidUpdate');
    // Get the old canvas and remove it
    var oldCanvas = document.getElementById('canvas');
    oldCanvas = null;

    // Add your completely new canvas
    const canvas = new fabric.Canvas('canvas');
    this.setCanvasBackground(this.props.getSelectedImage.selectedImage,      canvas);
}

• 在重新绘制新画布之前清除旧画布：

使用 Javascript 在 HTML5 中重绘 Canvas https://stackoverflow.com/questions/11773811/redrawing-canvas-in-html5-using-javascript

要清除画布，您需要执行上面链接中提到的操作。如果您使用此方法，请确保不要在 componentDidUpdate() 中向页面添加新画布。

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);

第二个解决方案的链接特别提到，如果您不清除画布，则绘制的元素将堆叠。