Question

＆＃13;

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')
);

＆＃13;

<!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>

＆＃13;

使用img标签时出现此错误，但图像显示在页面上。我正在使用远程URL来显示图像。我的Virtual DOM也有重复的DOM。我是

Answer 1

首先，您应该在componentWillMount中获取数据，而不是componentDidMount。这样你就可以避免双重渲染（在初始渲染react docs cwm之前等待在cwm中发生的状态转换）你是使用js-context bracers（img tag src value）将字符串作为道具传递，它不是必需的，可能会导致错误。

Answer 2

将脚本更改为ES6格式解决了问题

反应img标签给出错误

2 个答案: