Question

我目前正处于学习反应的过程中并遇到一个问题，让我在一天中的大部分时间都陷入困境。我有两个简单的组件。一旦调用IncidentsBoard，它就会包含其他名为事件的组件。

想法是（使用虚拟数据）IncidentBoard将显示车祸事故。我的代码：

IncidentBoard：

import React from 'react';
import Incident from './Incidents';
import testData from './testdata';

class IncidentBoard extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: testData.features,
            filtered: []
        }
    }

    componentWillMount() {

        var filtered = this.state.data.filter( (incident, i) => {
            return incident.properties.event_type === 'Crash';
        })

        console.log(filtered);
        this.setState({filtered})   

    }   

    render() {
      return <div>
            {this.state.filtered.map((incident, i) => {
                return <Incident id={i} description="swagg" />
            })}
        </div>
    }
}
export default IncidentBoard;

事件（目前大多是空的）：

import React from 'react';

class Incident extends React.Component {

    render() {
        return <div><h1>test</h1></div>
    }

}

export default Incident;

运行它时，会导致无限循环，其中componentWillMount（）运行时没有结束。我还注意到，如果我在IncidentBoard中的render函数中替换Incident组件，则错误不再发生。

编辑：更多代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import IncidentBoard from './Incidents';

ReactDOM.render(
    <IncidentBoard />, document.getElementById('react-container')
)

testData只是一个很大的JSON对象。

反应由组件引起的无限循环

0 个答案: