Question

我有简单的JSON示例，其中包含数组。它加载了ajax：

  {somekey: "value1", somekey2: "value2", belongsto: ["me","you"]}

我可以通过例如：

来渲染它

   <div>
          belongsto:  {this.state.data.belongsto}
   </div>

但是我想将它作为子组件中的列表呈现，所以我正在尝试：

    <Uli data={this.state.data.belongsto}/>

为：

    var Uli = React.createClass({
    render: function() {
        return (
        <ul className="Uli">
        {
          this.props.data.map(function(value) {
          return <li key={value}>{value}</li>
          })
        }
       </ul>
     )
    }
    });

这让我：

Uncaught TypeError: Cannot read property 'map' of undefined

如何实现这一目标？

Answer 1

您正在通过AJAX异步加载json数据，因此belongsto为undefined，直到您收到服务器的响应。

有几种解决方案可以解决这个问题：

将getDefaultProps方法添加到您的ULi组件。

var Uli = React.createClass({
    getDefaultProps() {
        return {
            data: []
        }
    },
    render: function() {
        return (
            <ul className="Uli">
            {this.props.data.map(function(value) {
                return <li key={value}>{value}</li>
            })}
            </ul>
        )
    }
});

使用||运算符：

<ul className="Uli">
    {(this.props.data || []).map(function(value) {
        return <li key={value}>{value}</li>
    })}
</ul>

如果ULi不是belongsto，则阻止undefined呈现：

{this.state.data.belongsto && <Uli data={this.state.data.belongsto}/>}

如何在React JS中渲染传递给子元素的数组？

1 个答案: