当我不循环setState时为什么会收到超过“最大更新深度”的错误

Question

我正在尝试编写一个甲板组件，以状态数组的形式存储甲板的等级和西服。我在shuffleDeck函数中得到Error: Maximum update depth exceeded。 shuffleDeck只是获取状态数组并对其进行随机播放。我只打电话给setState一次，为什么我会收到更新深度错误？

class Board extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
       deck: [],
    }
  }

  shuffleDeck() {
    const newDeck = Shuffle(this.state.deck);
    this.setState({
      deck: newDeck,
    })
  }

  renderDeck() {

    const ListSquares = ({deck}) => (
      <>
        {deck.map((card, index) => (
          <Square key={index} id={index} rank={card[0]} suit={card[1]}></Square>
        ))}
      </>
    );
    return (
      <>
        <ListSquares deck={this.state.deck} />
      </>
    );
  }

  componentDidMount() {
    return (
      <>
        {this.props.ranks.forEach(r => {
          this.props.suits.forEach(s => {
            this.setState(state => {
              const deck = [...state.deck, [r, s] ]
              return {
                deck,
              }
            })
          })
        })}
      </>
    );
  }

  render () {
    return (
      <div className="grid">
        {this.renderDeck()}
        {this.shuffleDeck()}
      </div>
    );
  }
}