ReactJS中初始状态的未定义值

Question

我对ReactJS还是很陌生，现在遇到了让我完全困惑的事情。

我创建了许多呈现Bootstrap模式的组件。 此外，我通过componentDidMount函数从服务器获取初始状态参数。 我的组件结构如下所示：

<App>
  <Modal Lauch Button /> 

  <Modal>
   <Modal Header />
   <Modal Body />     <-- here's the problem
  </Modal>
</App>

而且我的初始状态数组的形式（当然是JSON编码）：

array:5 [▼
   ...
   ...
   "private" => true
   "files" => array:2 [▼
       1 => array:7 [▼
          "id" => 0
          "route" => "some route"
          ...
          ...
       ]
       2 => array:7 [▼
          "id" => 1
          "route" => "some other route"
          ...
          ...
       ]
   ]
]

和我的（缩小的）React应用程序是这样的：

<script type="text/babel">

    var L5fmModalBody = React.createClass({

        render: function() {

            return(
                <Modal.Body>
                    <Grid fluid={true}>
                        <Row>
                            {
                                this.props.files.map(function (file) {
                                    return <L5fmModalBodyFileContent id={file.id} route = {file.route} / >
                                })
                            }
                        </Row>
                    </Grid>
                </Modal.Body>
            );
        }

    });

    var L5fmModalBodyFileContent = React.createClass({

        render : function() {
            return(
                <Col xs={6} md={4} className="img-row">
                    <div className="thumbnail thumbnail-img">
                        <img key={this.props.id} src={this.props.route} />
                    </div>
                </Col>
            );
        }

    });

    var L5fmModal = React.createClass({

        getInitialState : function() {
            return {
                data : []
            };
        },

        componentDidMount: function() {
            $.ajax({
                url: 'L5fm/setInitialState',
                dataType: 'json',
                cache: false,
                success: function(data) {
                    this.setState({data: data});
                    console.log(data);
                    console.log(this.state.data);
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        },

        render: function() {

            return(

                <Modal {...this.props} bsSize="large" aria-labelledby="contained-modal-title-lg">
                    <Modal.Header closeButton>
                        <div className="header-button-group">
                            some buttons
                        </div>
                    </Modal.Header>

                    <L5fmModalBody files={this.state.data.files} />
                </Modal>
            );
        }

    });


    var App = React.createClass({
        getInitialState: function() {
            return { lgShow: false };
        },
        render: function() {
            let lgClose = () => this.setState({ lgShow: false });

            return (
                 <Button bsStyle="primary" onClick={()=>this.setState({ lgShow: true })}>
                    Launch large demo modal
                 </Button>
                 <L5fmModal show={this.state.lgShow} onHide={lgClose} />
            );
        }
    });

    ReactDOM.render(<App />, document.getElementById("modal"));

</script>

每当我运行应用程序时，都会出现以下错误：

L5fmModalBody_renderTypeError：this.props.files.map不是函数。 （在“ this.props.files.map”中，“ this.props.files.map”未定义）

如果我在<Modal>组件中console.log(this.state.data.files) ，它还显示this.state.data.files是未定义的吗？ 显然我不知道发生了什么。 我也尝试过使用componentWillMount来获取数据，但这也没有帮助。 我究竟做错了什么？

谢谢！

---

更新

我想我又走了一步。 实际的问题不是开始时this.set,state为null ，因为在调用componentDidMount并设置了“新”状态之后，UI会再次呈现。 此外，我发现JSON显然将关联数组作为对象进行处理，并且我相信我无法在对象上调用map 。

有任何想法吗？

Answer 1

是的，当然，它会引发错误，因为您正在传递此<L5fmModalBody files={this.state.data.files} />并且您的状态已在data : []声明data : []这意味着首次渲染发生时数据只是一个空白数组，并且完成后，您的组件将在浏览器上呈现，然后调用L5fmModal的componentDidMount ，它将从数据库获取数据，并再次更新状态和呈现函数，并且数据具有文件字段，但是当数组只是一个空时，第一次加载该怎么办？该时间文件字段未定义，因此您必须在L5fmModalBody实现以下提到的代码

     {
(type of this.props.files != 'undefined')? this.props.files.map(function (file) {
                                        return <L5fmModalBodyFileContent id={file.id} route = {file.route} / >
                                    }):null                                
}

或者您也可以通过以下方式阻止自己使用L5fmModal

{this.state.data.length>0 ? <L5fmModalBody files={this.state.data.files} />:null}

Answer 2

多亏了Dhaval Patel，我终于有了这个问题的答案。 问题不在于初始状态的null值，因为在调用componentDidMount时，UI会再次呈现并从服务器接收更新后的状态。 实际的问题是JSON将关联数组视为对象 ，因此无法调用简单map 。

我刚换

{
    this.props.files.map(function (file) {
        return <L5fmModalBodyFileContent id={file.id} route = {file.route} / >
    })
}

至

{
    Object.keys(object).map(
        function(d){
            return <L5fmModalBodyFileContent id={object[d].id} route={object[d].route} />
    })
}

其中object = this.props.files ，它就像一个魅力！

为了避免使用（最初）未定义对象的错误

{this.state.data.length!=0 ? <L5fmModalBody files={this.state.data.files} />:null}

在<Modal />组件中。