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

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 中渲染传递给子元素的数组？

How to render array passed to sub element in React JS?

arrays

render

reactjs