Question

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

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

我想做的就是这个。我希望用户按空格键，屏幕上会显示Person 1。我希望用户再次按空格键，然后在屏幕上添加Person 1 Person 2，依此类推。

我不知道怎么做，我怎么能在Redux中控制列表中显示的人数。

对于这个非常基本的问题，我很抱歉，我对React / Redux还不熟悉。我知道如何通过数组并始终一次显示一个人，或者使用map函数一次显示所有人。但我正在努力将它们逐渐添加到视图中。

Answer 1

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

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>
    )
  }

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

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

1 个答案: