錯誤時更新ReactJS狀態複雜對象

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錯誤：對在react.js庫線1093

Uncaught [object Object] 

（在方法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：我發現，除去大部分的渲染方法「修正」的錯誤。所以我要去張貼成分太多的定義：

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作品。

您可以通過創建一個ref您元素直接填充它：

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。嘗試刪除它，看看它是否修復你的問題。

便箋：Object.assign() React的setState不需要撥打電話。 setState方法將自動與當前狀態合併。

編輯： 看來，React現在將自動綁定this的組件功能。編輯2： 現在我們可以看到CreativePreview。

Answer 2

有我的代碼中的幾個誤區：

• 在線class和style在HTML標籤被假定實際html約定，而不是jsx格式。
• iframe很難在reactJS中實現。我發現從https://github.com/ryanseddon/react-frame-component靈感的方法，但因爲它沒有盒子的工作了，我用香草的Javascript在它：

-

var CreativeFrame = React.createClass({ 

    render: function() { 
    var style = { width: '420px', border: 'none', height: '280px' }; 
    return <iframe 
     style={style} 
     className="tweet-content" 
     id={ "iframe-tweet-id-" + this.props.creative.tweet_id }> 
    </iframe>; 
    }, 
    componentDidMount: function() { 
    this.renderFrameContents(); 
    }, 
    renderFrameContents: function() { 
    // Proof that good old Javascript >> Any library 
    var iframe = document.getElementById("iframe-tweet-id-" + this.props.creative.tweet_id); 
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 
    iframeDoc.body.innerHTML = this.props.creative.preview; 
    }, 
    componentDidUpdate: function() { 
    this.renderFrameContents(); 
    }, 
    componentWillUnmount: function() { 
    var doc = ReactDOM.findDOMNode(this).contentDocument; 
    if (doc) { 
     ReactDOM.unmountComponentAtNode(doc.body); 
    } 
    } 
}); 

如果有人知道關於它的改進，讓我知道。