Javascript 在React/Redux中在屏幕上逐个显示内容

假设我的React应用程序中有以下内容，其中我的减速器保持以下状态：

{
 array: ["Person 1", "Person 2", "Person 3"];
}

我想做的就是这样。我希望用户按下空格键，屏幕上会显示

Person 1

。我希望用户再次按下空格键，然后在屏幕上添加to

Person 1

Person 2

，依此类推

我不知道如何做到这一点，如何在Redux中控制列表中要显示的人数

---

对于这个非常基本的问题，我很抱歉，我对React/Redux相当陌生。我知道如何通过数组每次显示一个人，或者使用

map

功能同时显示所有人。但是我正在努力将它们逐渐添加到视图中。

有很多方法可以做到这一点，这里有一种：

export class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      players: [],
      currentPlayer: 0
    }
  }
  componentDidMount() {
    document.addEventListener('keypress', (e) => {
      if (e.keyCode !== 32) return;
      this.setState({ currentPlayer: currentPlayer + 1 }) 
      // You should check beforehand if you are in the last index of your array, but I'll not do it here.
    });
  }
  // You need to remove the event Listener on willUnmount as well
  render() {
    if (!this.state.players.length)
      return <div> No Players </div>
    return (
      <div>{this.state.players[this.state.currentPlayer]}</div>
    )
  }

导出类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
玩家：[]，
当前播放器：0
}
}
componentDidMount（）{
document.addEventListener（'keypress'，（e）=>{
如果（e.keyCode！==32）返回；
this.setState（{currentPlayer:currentPlayer+1}）
//您应该事先检查是否在数组的最后一个索引中，但我不会在这里进行检查。
});
}
//您还需要删除willUnmount上的事件侦听器
render（）{
如果（！this.state.players.length）
不返回任何玩家
返回(
{this.state.players[this.state.currentPlayer]}
)
}

---

这是一些基本结构，没有redux。您可以稍后添加redux，但我建议您在跳到redux之前先学习React的基本知识。有很多方法可以做到这一点，这里有一种：

export class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      players: [],
      currentPlayer: 0
    }
  }
  componentDidMount() {
    document.addEventListener('keypress', (e) => {
      if (e.keyCode !== 32) return;
      this.setState({ currentPlayer: currentPlayer + 1 }) 
      // You should check beforehand if you are in the last index of your array, but I'll not do it here.
    });
  }
  // You need to remove the event Listener on willUnmount as well
  render() {
    if (!this.state.players.length)
      return <div> No Players </div>
    return (
      <div>{this.state.players[this.state.currentPlayer]}</div>
    )
  }

导出类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
玩家：[]，
当前播放器：0
}
}
componentDidMount（）{
document.addEventListener（'keypress'，（e）=>{
如果（e.keyCode！==32）返回；
this.setState（{currentPlayer:currentPlayer+1}）
//您应该事先检查是否在数组的最后一个索引中，但我不会在这里进行检查。
});
}
//您还需要删除willUnmount上的事件侦听器
render（）{
如果（！this.state.players.length）
不返回任何玩家
返回(
{this.state.players[this.state.currentPlayer]}
)
}

---

这是一些基本结构，没有redux。您可以稍后添加redux，但我建议您在跳到redux之前先学习React的基本知识

谢谢！据我所知，这段代码将始终显示一个当前播放器。但是，如果我按空格键3次，我不想只显示第三个播放器，而是显示第三个之前的所有播放器。是的，我错过了你可以很容易地重构这段代码，把

currentPlayer

改成

currentPlayerIds

或者类似的东西，然后映射到

currentPlayerIds

中包含的玩家。谢谢！据我所知，这段代码总是会显示一个当前玩家。但是，如果我按空格3次，我不想看到只显示第三个播放器，但所有播放器都显示到第三个。是的，我错过了。您可以轻松重构此代码，将

currentPlayer

更改为

currentplayerId

或类似的内容，并映射到

currentplayerId