Reactjs - 通过按钮更改随机数组中的项目

Question

It's me again with the same card game as my last question. I have been doing some progress but this time i want to fix the code so that one card in the randomized "hand", is switched with another random card that must not be an already used card. This is done by pressing the second button under randomizer button. In the code i have made the changing button does the same as the randomization button, but i intend to change it.

function replace() {
  var res = str.replace(this.state.cards, this.state.replacecards);
}
// what i intend to be the function that is used to replace the item

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: ["A♥", "A♠", "A♦", "A♣", "2♣", "3♣", "4♣", "5♣", "6♣", "7♣", "8♣", "9♣", "10♣", "K♣", "Q♣", "J♣", "2♦", "3♦", "4♦", "5♦", "6♦", "7♦", "8♦", "9♦", "10♦", "K♦", "Q♦", "J♦", "2♥", "3♥", "4♥", "5♥", "6♥", "7♥", "8♥", "9♥", "10♥", "K♥", "Q♥", "J♥", "2♠", "3♠", "4♠", "5♠", "6♠", "7♠", "8♠", "9♠", "10♠", "K♠", "Q♠", "J♠"],
      hand: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const cards = this.state.cards;

    const newHand = [];

    function in_array(array, el) {
      for (var i = 0; i < array.length; i++) if (array[i] == el) return true;
      return false;
    }

    function get_rand(array) {
      var rand = array[Math.floor(Math.random() * array.length)];

      if (!in_array(newHand, rand)) {
        newHand.push(rand);
        return rand;
      }
    }
    function sortcards(a, b) {
      return a > b ? 1 : b > a ? -1 : 0;
    }

    for (var i = 0; i < 5; i++) {
      get_rand(cards);
    }

    this.setState({
      hand: newHand
    });
    newHand.sort(sortcards);
  }

  render() {
    const { hand } = this.state;
    return (
      <div>
        {hand
          ? hand.map(card => {
              return <p>{card}</p>;
            })
          : null}
        <button onClick={this.handleClick}>Randomize</button>
        <br />
        <button onClick={this.handleClick}>Change the first card</button>
      </div>
    );
  }
}

Answer 1

Here's what you need bigboyopiro. Its fitting that I get to answer your 2nd question as well :).

Here's the sandbox for reference: https://codesandbox.io/s/yv93w19pkz

  swapOneCard = () => {
    const currentHand = this.state.hand
    //get random card to remove from current hand
    const cardToRemove = currentHand[Math.floor(Math.random() * currentHand.length)];
    //all cards
    const allCards = this.state.cards
    //unchoosen cards to choose from
    const unchoosenCards = allCards.filter((card) => {
      return !currentHand.includes(card)
    })
    //get random card from unchoosen cards
    var cardToAdd = unchoosenCards[Math.floor(Math.random() * unchoosenCards.length)];

    const newHand = currentHand.map((card) => {
      if(card == cardToRemove){
        return cardToAdd
      } else {
        return card
      }
    })

    this.setState({
      hand: newHand
    })
  }

Answer 2

If I'm understanding your question and your code correctly, the button you are going to press replaces the first card in your hand with a new card that isn't already in your hand. If this is the case, you can use the following to achieve this:

 getNewCard = () => { let { cards, hand } = this.state; let newCardIndex = Math.floor(Math.random()*cards.length); let newCard = cards[newCardIndex]; while (hand.contains(newCard)) { cards.splice(newCardIndex, 1); newCardIndex = Math.floor(Math.random()*cards.length); newCard = cards[newCardIndex]; } hand[0] = newCard; this.setState({ hand }); } 

The important part is the while loop. It will keep getting a new random card in the array until the random card we get isn't in our hand. If the random card is in our hand, we remove it from the cards array. This is to ensure that we don't randomly get the same card again.