Question

渲染反应组件时的超奇怪行为。

组件Herolist正在渲染，即使我完全删除它！

主要的问题是我想要在Herolist之后呈现其他div /组件，但它们会被忽略！

我尝试过清理浏览器Cookie和边缘。我尝试了一个新的“npm start”。我在节点中收到此警告：

./src/js/components/Pagecontent.js
  Line 4:   'Pagecontent' is defined but never used                                 no-unused-vars
  Line 13:  Comments inside children section of tag should be placed inside braces  react/jsx-no-comment-textnodes

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Pagecontent.js：

import React from 'react';
import Herolist from './Herolist';

class Pagecontent extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
     <div id ="pageContent" className="ui-widget ui-helper-clearfix row">

  /*Still renders if i delete this completly       
   *<Herolist />  
   */ 

        <div id="heroToBeDisplayed" className="ui-widget-content ui-state-default col-lg-5 col-md-push-5">
          <h4 className="ui-widget-header">Your Hero</h4>
        </div> 
        <div id="trash" className="ui-widget-content ui-state-default col-lg-2">
          <h4 className="ui-widget-header">Enemies</h4>
        </div>

      </div>
    );
   }
 }
 export default Herolist;

Herolist.js：

import React from 'react';
import Hero from './Hero';

class Herolist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      heroes: [],
    };
  }

getReports() {
    fetch('http://xxxx/getHeroes', {
        method: 'GET',
        headers: {
        }
    })
        .then(result => result.json())
        .then(result => {
            this.setState({
                heroes: result})
        });
}

componentWillMount() {
    this.getReports();
}


  render() {
     return (
     <ul id="heroList" className="gallery ui-helper-reset ui-helper-clearfix col-lg-3 col-md-pull-5">
        <h4 className="ui-widget-header">Heroes</h4>
        <div className="row">
            {this.state.heroes.map(hero =>(
            <Hero hero={hero} /> 
         ))}
            </div>
        </ul>
    );
  }
}
export default Herolist;

预期行为：

实际行为：

即使已删除，组件也会呈现

0 个答案: