Question

我有一个React应用程序，它使用同步AJAX调用检索的嵌套JSON对象。在返回调用时，我遍历JSON并将组件所需的每个数据包绑定到各个状态变量。

然后我在渲染中调用组件 - 也是嵌套的 - 并将它们和他们的孩子需要的数据作为道具传递给他们。

通过<SubComponent dataToUse={this.props.value} />传递单个值的效果很好但是，当我传递一个数组并尝试在组件中映射该数组时，浏览器控制台会给出错误：

无法读取未定义的属性“map”

...显然这个数组实际上并不存在 - 因为它处于渲染状态，也许它在AJAX调用返回JSON文件之前运行map？但是，如果我在将数组绑定到状态时对其进行字符串化并传递该数据，则整个数据数组将作为字符串存在。

如果我把那个字符串并将其解析回JSON，我就明白了：

位于0的JSON中的意外标记u

这又表明数据不存在。

我只想说，我很困惑。我可以轻松地将单个数据变量作为道具传递到我的应用层次结构中，但无法访问数组。

有没有其他人遇到过这类问题？

编辑;一些代码：

我最顶级的组件使用JQuery进行AJAX调用：

$.ajax({
    type: 'GET',
    url: "/api/" + eventCode,
    dataType: 'json',
    cache: false,
    success: function(data) {
        this.setState({updateList: data.updates});
        }.bind(this)
    });

这个AJAX调用位于它自己的函数中，每30秒调用一次：

componentDidMount: function() {
    this.loadCommentsFromServer();
    var refreshInterval = 32000; // take this from the blob!
    setInterval(this.loadCommentsFromServer, refreshInterval);  
},

渲染功能如下：

render: function() {
    return (
        <div id='App'>
            <UpdateList updateData={this.state.updateList}/>
        </div>
    )
}

UpdateList组件如下：

var UpdateList = React.createClass({

    render: function() {


        return (
            <div id='UpdateList'>
                Update list:
                <ul>
                {
                    this.props.updateData.map(function(update, i){
                        return <Updates singleUpdate={this.props.updateData[i]}/>
                    })
                }
                </ul>
            </div>
        )
    }
});

如果在getInitialState中添加一个简单的测试数组，则会映射该数组，并且Updates组件会根据需要呈现每个项目。

无法访问JSON对象数组作为props

0 个答案: