は、imgタグがエラー

var CommentBox = React.createClass({ 
 
    getInitialState: function() { 
 
    return {data: []}; 
 
    }, 
 
    componentDidMount: function() { 
 
    var defer = new Array(); 
 
    //var _this = this; 
 
    var repocall = $.ajax({ 
 
     url: this.props.url, 
 
     dataType: 'json', 
 
    }) 
 
    .then((data)=>{ 
 
    var dataLength; 
 
    for (dataLength = 0; dataLength <data.length;dataLength ++) { 
 
     var ajax = $.ajax({ 
 
      url: data[dataLength].contributors_url, 
 
      method: 'get' 
 
     }); 
 
     defer.push(ajax); 
 
    } 
 
    Promise.all(defer).then((results)=>{ 
 
     var res = results.filter(Boolean); 
 
     //console.log(res); 
 
     //var flatten = _.flattenDeep(res); 
 
     var resUniq = _.uniqBy(_.flattenDeep(res),'login'); 
 
     //console.log(resUniq); 
 
     this.setState({data:resUniq}); 
 
    }); 
 
    }); 
 

 
    }, 
 
    render: function() { 
 
    return (
 
     <div className="commentBox"> 
 
     <h1>Comments</h1> 
 
     <CommentList data = {this.state.data} /> 
 

 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var CommentList = React.createClass({ 
 
    render: function() { 
 
    //console.log(this.props.data); 
 
    var commentNodes = this.props.data.map(function(comment) { 
 
      console.log(comment); 
 

 
     return (
 
     <Comment comment={comment} key={comment.id}> 
 
     </Comment> 
 
    ); 
 
    }); 
 
    return (
 
     <div className="commentList"> 
 
       {commentNodes} 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 

 
var Comment = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <img src={'https://avatars.githubusercontent.com/u/5215440?v=3'} /> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(
 
    <CommentBox url = 'https://api.github.com/orgs/opencord/repos' />, 
 
    document.getElementById('content') 
 
);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>React Tutorial</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="content"></div> 
 
    <script type="text/babel" src="app/hello.js"></script> 
 
    <script type="text/babel"> 
 
     // To get started with this tutorial running your own code, simply remove 
 
     // the script tag loading scripts/example.js and start writing code here. 
 
    </script> 
 
    </body> 
 
</html>

imgタグを使用している間、私はこのエラーを取得していますを与えて反応するが、画像がページ上に表示されます。私は画像を表示するためにリモートURLを使用しています。また、私の仮想DOMにはDOMが重複しています。私は

出典

2016-08-03 Arpit Agarwal

スクリプトをES6形式に変更すると問題が解決しました

出典

2016-08-05 21:16:03

あなたがcomponentWillMount、ないcomponentDidMountでデータをフェッチする必要がありますまず第一にしています。そうすれば、ダブルレンダリングを避けることができます（react docs cwmの前にcwmで状態遷移が発生するのを待つ） js-context bracers（imgタグsrc値）を使用して文字列を小道具として渡すと、エラー。

出典

2016-08-03 19:26:44 Moonjsit

私は変更を行いましたが、複数のDOMが表示されています。 –

複数のDOM？ – Moonjsit

を説明してください申し訳ありませんが、私はDOMを重複していることを意味していますImage –

は、imgタグがエラー

答えて

関連する問題