javascript - React HTML Canvas 不更新

Question

我在 DrawingCanvas.jsx 中有这段代码:

var _ = require('bower.js').lodash;
var React = require('bower.js').React;
var channel = require('com.js').channel;

var DrawingCanvas = React.createClass({
  setCanvasImage: function(){
    if(this.props.image != null)
    {
      //var canvas = React.findDOMNode(this.refs.canvas); // React 0.13 +
      var canvas = this.refs.canvas.getDOMNode();
      var context = canvas.getContext("2d");
      var image = new Image(100,100);
      image.src = 'data:image/png;base64,' + btoa(this.props.image);
      context.drawImage(image, 10, 10);
    }
  },
  componentWillUpdate: function(nextProps, nextState){
    this.setCanvasImage();
  },
  render: function(){
    return (
      <div>
        <canvas ref="canvas" height={this.props.height} width={this.props.width} className="drawing-canvas"></canvas>
      </div>
    );
  }
});

module.exports = DrawingCanvas;

当 this.props.image 更新时我想更新 Canvas 的地方(从服务器接收。我已经验证我从服务器接收到图像。这也是我的 app.jsx 代码:

var Oboe = require('bower.js').pOboe;
var channel = require('com.js').channel;

var DrawingCanvas = require('components/DrawingCanvas.jsx');

var cfg = {
  rootApiUrl: 'http://localhost:55474/'
  //rootApiUrl: 'http://trussmgmtdevserver.azurewebsites.net/'
};

var getParameterByName = function(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var appState = {
    image: null
}

var subscriptions = {
    image: {
        received: channel.sub('image.received', function (image) {
            appState.image = image;
            console.log("RCVD");
        })
    }
};

var renderDrawingCanvas = function (user) {
  React.render(<DrawingCanvas image={appState.image} height={90} width={90}/>, document.querySelector('.canvas-anchor'));
};

renderDrawingCanvas();

Oboe({
        url: cfg.rootApiUrl + 'api/pdfFile/edit?pdfFileId=' + getParameterByName("pdfFileId"),
        method: 'GET'
      }).then(function (data) {
        channel.pub('image.received', data.imageData);
      })
        .catch(function (err) {
          console.error(err);
        });

我没有收到控制台错误，但我没有看到 Canvas 元素更新。我在 setCanvasImage 上设置了一个没有被击中的断点。 componentWillUpdate(调用 setCanvasImage)是否由于某种原因没有被击中？我该怎么做才能根据更新的 Prop 更新我的 Canvas 元素？提前致谢。

编辑:

不是 this question 的副本.虽然这个问题很有启发性，但我不是从 url 加载图像，而是从 base64 图像数据加载图像。是的，通过 Oboe 请求，但问题不在于服务器没有提供图像数据。正如问题中所述。图像数据已经存在，不必加载。是的，它不存在于 React 组件的初始构建中，因为 Oboe 请求正在进行中，但这归结为何时以及如何调用 setCanvasImage，这是这个问题的本质。它不是重复的，因为另一个问题没有在响应式(Reactive)编程上下文中解决这个问题。

Answer 1

根据 Matt Huggins 的建议，尝试 componentDidUpdate。使用浏览器调试器并确保您正在进入 setCanvasImage 中的条件。

正如其他人所建议的，您需要在 app.jsx 中使用某种机制来触发 DrawingCanvas Prop 进行更新。这可能是一个高级 React 组件，或者你自己的控制流。订阅不一定是 React 组件，尽管这不是一个坏方法。如果您在需要更新的对象之间有更复杂的兄弟关系，您的设置可能很合适。从您的 image.received 订阅中调用 renderDrawingCanvas。