Question

我正在尝试将状态对象作为属性传递给在地图方法中使用的子组件SkiDayList的属性。它触发无限循环。请帮助

也称为占位符（或填充符）文本。 ... 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。这就产生了循环加载问题。这是一个循环依赖性。您需要采取任何一种方式。

ReactJs无限循环

1 个答案: