Question

我希望迭代一个数组，并在每次单击按钮时显示数组中的每个元素。

到目前为止，我有这个：

  {this.state.users.map(function(user, index){
        return <p key={ index }>{user.name} </p>;
      }, this)}

这将在屏幕上显示每个用户名，一个接一个。我怎么能这样做它只是显示用户[0]，然后移动到用户[1]甚至更好，点击删除位置用户[0]的用户，然后一个新人在位置用户[0]，然后如果数组为空，它显示文本'没有更多用户' 我知道如何从数组等中删除元素，它只是在React土地上一次显示一个我无法做到的事情

Answer 1

根据我对你的问题的理解，你可能正试图实现这个目标 -

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="test">
</div>

{{1}}

Answer 2

将activeUser的索引保持在状态，然后只渲染这一个用户：{ this.state.users[ this.state.activeUser ].name}。单击时增加/减少activeUser。

demo on jsfiddle

var Users = React.createClass({
    getInitialState(){
    return {
        users : [{ name : 'John'}, { name : 'Jane'}, { name : 'Robert' }],
        activeUser : 0
    };
  },
  next(){
    /* here you should add checking if there are more users before setting the state */
    this.setState({ activeUser : this.state.activeUser + 1 });
  },
  render: function() {
    return (<div>
        <p>{ this.state.users[ this.state.activeUser ].name} </p>
        <span onClick={ this.next }>next</span>
      </div>);
  }
});

Answer 3

好像你在你的问题中有伪代码，就像Rajesh问的那样似乎描述了某种用户/轮播的分页列表。

您需要定义列表中可见的最大用户数，然后存储当前最顶层的元素索引。我建议将这些存放在州内。

然后将名称列表存储为对象数组，每个对象包含名称详细信息以及表示它是否可见的参数。

您的初始状态可能如下所示：

{
  currentTopElement: 0,
  maxNamesToShow: 1,
  names: [
    {name: 'John Smith', isVisible: false},
    {name: 'Jane Smith', isVisible: false},
    ...etc.
  ]
}

在您的按钮上添加一个单击处理程序将使currentTopElement增加一。
遍历names数组设置isVisible为false，除非索引与currentTopElement匹配，如果它确实将isVisible设置为true

要完成此操作，在需要呈现名称列表的组件中，如果仅在相应的isVisible值为true时有条件地呈现名称，则可以这样做：

const elementsToShow = this.state.filter( t => t.isVisible);

你可以像这样迭代elementsToShow：

elementsToShow.map((user, index) => <p key={ index }>{user.name} </p>);

在React中显示阵列数据

3 个答案: