ReactJs无限循环

Question

我试图将状态对象作为道具传递为子组件SkiDayList的属性，以便在map方法中使用。它会触发无限循环。请帮忙

它也称为占位符（或填充）文本。 ...... Lorem ipsum主要是古典作家和哲学家西塞罗的拉丁文本的一部分。它的单词和字母已经通过添加或删除而被更改，因此故意使其内容无意义;它不再是真正的，正确的或可理解的拉丁语。

以下是代码：APP.js：

import React, {Component} from 'react';
import SkiDayCount from './SkyDayCount';
import SkiDayList from './SkiDayList';


class App extends Component {
  constructor(props) {
         super(props);
         this.state = {
           allDays:
           [
             {
               resort: "Teton Village",
               date: "20/01/2018",
               powder: true,
               backcountry: false
             },
             {
               resort: "Rabbit Hill",
               date: "21/01/2018",
               powder: true,
               backcountry: false
             },
             {
               resort: "Jasper",
               date: "22/01/2018",
               powder: false,
               backcountry: true
             },
             {
               resort: "Banff",
               date: "23/01/2018",
               powder: false,
               backcountry: true
             }
           ]
         }
     }

render () {
  return (
    <div>
      <p>I am App.js with the state in it</p>
      <p> {this.state.allDays[1]['resort']} </p>
      <SkiDayList days={this.state.allDays}/>

    </div>

  )
}
}
export default App;

SkiDayList.js：

import React from 'react';
import SkiDayRow from './SkiDayRow';
import {PropTypes} from 'prop-types';
import App from './app';

const SkiDayList = (props) => (
  <div>
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Resort</th>
        <th>Powder</th>
        <th>Backcountry</th>
      </tr>
    </thead>
    <tbody>
          {props.days.map((day,i) => {
            return (<SkiDayRow
                        key={i}
                        {...day}
              />)
          })}
    </tbody>
  </table>
  <App/>
  </div>

)

export default SkiDayList;

SkiDayRow.js：

 import React from 'react';

    const SkiDayRow = (props) => (
      <tr>
        <td>{props.date}</td>
        <td>{props.resort}</td>
        <td>{(props.powder)?"Yes":null}</td>
        <td>{(props.backcountry)?"Yes":null}</td>
      </tr>
    )
    export default SkiDayRow;

谢谢

Answer 1

你在import App from './app';文件中包含了SkiDayList.js。再次，你在import SkiDayList from './SkiDayList';中包括App。这造成了循环加载问题。这是循环依赖。你需要做任何一种方式。