如何在reactjs中读取数组的信息？

Question

我想循环一个数组并从中创建列表项.在控制台中,它显示错误被抛出,因为我的数组没有键但只有值.那么读出数组的正确操作是什么？

*// this.props.items = ["cars","streets","houses"];*Wrong. You can't update props

var TodoList = React.createClass({
 render: function() {
  var createItem = function(item) {
  return <li>{item}</li>;
  };
  return <ul>{this.props.items.map(createItem)}</ul>;
}
});

Answer 1

试试这种方式:

this.filterOptions =['Monthly','Weekly','Daily'];

   <ul>
       {  this.filterOptions.map((filterItem) => {
       return (
                <li key={filterItem}>
                    <span>{filterItem}</span>
                 </li>
              );
          })
       }
     </ul>

编辑1:如果数组中有重复值,

   <ul>
       {  this.filterOptions.map((filterItem,index) => {
       return (
                <li key={index}>//key must be uniq
                    <span>{filterItem}</span>
                 </li>
              );
          })
       }
     </ul>