时间戳

首页 > 解决方案 > 部署后更改的反应状态数组

javascript - 部署后更改的反应状态数组

问题描述

我的掷骰子应用程序掷骰子并记录以前的掷骰子。

您可以在 github 页面上看到该应用程序：https ://mtrussell.github.io/dice-roll-app/

要查看所有应用程序的代码，这里是 repo：https ://github.com/mtrussell/dice-roll-app

RollDice 组件将当前滚动添加到滚动数组。PrevRolls 组件反转数组并将其映射到 jsx 元素。

问题是当我将它部署到 github 页面时，它的行为与我的本地机器上的不同。它似乎在一秒钟后改变了阵列，将其翻转回来。

我认为它与按钮超时有关，但我完全删除了它并且不稳定的行为仍然存在。

我尝试过以多种不同的方式重组我的代码，但似乎没有任何解决办法。

RollDice 组件 -

import React, { Component } from 'react';
import Die from './Die';
import PrevRolls from './PrevRolls';
import './RollDice.css';

class RollDice extends Component {
  static defaultProps = {
    sides: ['one', 'two', 'three', 'four', 'five', 'six']
  }

  constructor(props) {
    super(props);
    this.state = {
      die1: 'one',
      die2: 'two',
      rolling: false,
      rolls: []
    }
    this.handleClick = this.handleClick.bind(this);
  }

  randomDice() {
    const newDie1 = this.props.sides[
      Math.floor(Math.random() * this.props.sides.length)
    ];
    const newDie2 = this.props.sides[
      Math.floor(Math.random() * this.props.sides.length)
    ];
    return [newDie1, newDie2];
  }

  roll(dice) {
    this.setState(prevState => {
      return {
        die1: dice[0], 
        die2: dice[1], 
        rolling: true,
        rolls: [...prevState.rolls, {first: dice[0], second: dice[1]}]
      }     
    });
  }

  handleClick() {
    const dice = this.randomDice();
    this.roll(dice);
    setTimeout(() => {
      this.setState({
        rolling: false,
      });
    }, 1000);
  }


  render() {
    let rollButton = this.state.rolling ? 'Rolling...' : 'Roll Dice!';

    return(
      <div className='RollDice'>
        <div className='RollDice-dice'>
          <Die face={this.state.die1} rolling={this.state.rolling} />
          <Die face={this.state.die2} rolling={this.state.rolling} />
        </div>
        <button onClick={this.handleClick} disabled={this.state.rolling}>{rollButton}</button>
        <PrevRolls rolls={this.state.rolls} />
      </div>
    );
  }
}

export default RollDice;

PrevRolls 组件 -

import React, { Component } from 'react';
import './PrevRolls.css'

class PrevRolls extends Component {
  constructor() {
    super();
    this.displayRolls = this.displayRolls.bind(this);
  }

  reverseRolls() {
    return this.props.rolls.reverse();
  }

  displayRolls() {
    return this.reverseRolls().map((roll, index) => (
      <p>
        Roll {this.props.rolls.length - index} <i className={`fas fa-dice-${roll.first}`} ></i> <i className={`fas fa-dice-${roll.second}`} ></i>
      </p>
    ));
  }

  render() {
    return(
      <div className='PrevRolls'>
        <div className='PrevRolls-list'>
          {this.displayRolls()}
        </div>
      </div>
    );
  }
}

export default PrevRolls;

标签： javascriptarraysreactjsgithub-pages

解决方案

感谢xadm，我明白了这一点。reverse() 正在改变父组件的数组。

我更改了在 RollDice 组件的 roll() 函数中设置状态的方式。

在 PrevRolls 组件中，我删除了 reverseRolls() 函数及其在 displayRolls() 函数中的函数调用。

RollDice 组件 -

roll(dice) {
    this.setState(prevState => {
      return {
        die1: dice[0], 
        die2: dice[1], 
        rolling: true,
        rolls: [{first: dice[0], second: dice[1]}, ...prevState.rolls]
      }     
    });
  }

PrevRolls 组件 -

displayRolls() {
    return this.props.rolls.map((roll, index) => (
      <p>
        Roll {this.props.rolls.length - index} <i className={`fas fa-dice-${roll.first}`} ></i> <i className={`fas fa-dice-${roll.second}`} ></i>
      </p>
    ));
  }

推荐阅读