Question

当我做类似的事情时：

getInitialState: function() {
  return { previews: [], isLoading: true, error: "", nextCursor: "" };
},
componentDidMount: function(){
  $.ajax("/my-url", {
    method: "GET",
    success: this.previewsReceived,
    failure: this.previewsFailedToReceive
  });
},
previewsReceived: function(previews){
  var tmpState =  { isLoading: false, previews: previews.data, nextCursor: previews.next_cursor, error: "" };
  this.setState(tmpState);
},

previewsFailedToReceive: function(_){
  this.setState(Object.assign({}, this.state, { error: "", isLoading: false, previews: [], nextCursor: "" }));
},

我收到以下reactJS错误：

Uncaught [object Object]

在react.js库中的1093行上（在方法invariant中）。

如果我没有将任何复杂对象（在我的previews数据内）传递给状态，我就不会收到错误。

对我做错了什么的想法？

编辑：这是整个组件，解决第一个答案，我仍然得到相同的错误。

var Creatives = React.createClass({
  getInitialState: function() {
    return { previews: [], isLoading: true, error: "", nextCursor: "" };
  },
  componentDidMount: function(){
    $.ajax("/my-url, {
      method: "GET",
      success: this.previewsReceived.bind(this),
      failure: this.previewsFailedToReceive.bind(this)
    });
  },
  previewsReceived: function(previews){
    var tmpState =  { isLoading: false, previews: previews.data, nextCursor: previews.next_cursor, error: "" };
    this.setState(tmpState);
  },

  previewsFailedToReceive: function(_){
    this.setState({ error: "", isLoading: false, previews: [], nextCursor: "" });
  },

  render: function() {
    return <ul>
      {this.state.previews.map(function(creative) {
        return <li key={creative.tweet_id} style="width: 450px">
          <input type="checkbox" style="float:left;margin-top: 10px" />
          <CreativePreview creative={creative} /></li>;
        })
      }
      </ul>;
  }
});

当我致电bind时，我也收到以下警告：

Warning: bind(): You are binding a component method to the component.
React does this for you automatically in a high-performance way,
so you can safely remove this call. See Creatives

Edit2：我发现删除大部分渲染方法＆＃39;修复＆＃39;错误。所以我也要发布该组件的定义：

var CreativePreview = React.createClass({
  render: function() {
    return <iframe
        id={ 'iframe-tweet-id-'+ this.props.creative.tweet_id }
        dangerouslySetInnerHTML={this.props.creative.preview}>
    </iframe>;
  }
});

Answer 1

我不认为dangerouslySetInnerHtml的工作方式与<iframe>元素相同。

您可以通过为ref元素创建<iframe>来直接填充它：

var CreativePreview = React.createClass({
  componentDidMount: function(){
    var frame = React.findDOMNode(this.refs.myFrame);
    frame.document.body.innerHTML = this.props.creative.preview;
  },
  render: function() {
    return <iframe ref='myFrame' />;
  }
});

错误很可能发生在CreativePreview。尝试删除它以查看它是否可以解决您的问题。

附注：React＆＃39; Object.assign()不需要setState次来电。 setState方法将自动与当前状态合并。

编辑：看来React现在会为组件函数自动绑定this。

编辑2：现在我们可以看到CreativePreview。

Answer 2

我的代码中有几个错误：

html代码中的内联<% Set adoCon = Server.CreateObject("ADODB.Connection") adoCon.Open = ConnectionString Set rsReports = Server.CreateObject("ADODB.Recordset") strSQL = "Select * From Customers" rsReports.Open strSQL, adoCon %>和class假设实际为style约定而不是html格式。
iframe很难在reactJS中实现。我找到了一个灵感来自https://github.com/ryanseddon/react-frame-component的解决方法，但由于它没有开箱即用，我在其中使用了vanilla Javascript：

-

jsx

如果有人知道有关它的改进，请告诉我。

使用复杂对象更新ReactJS状态时出错

2 个答案: