setState 不重新渲染组件答案

【问题标题】：setState not re-rendering componentssetState 不重新渲染组件
【发布时间】：2020-11-02 08:37:44
【问题描述】：

我查看了以前的答案，但找不到解决方案。我的状态包含一副“色卡”：

class App extends Component {
  constructor() {
    super()
    this.allCards = ['#fca7f3 ', 'white', ' #6da740  ','  #f6faba  ', ' #ccc5c1 ', '  #f7791f  ', ' #575657 ', ' #03faf5 ', ' #13afdb ', ' #7509e2 ', ' #63522e ', ' #d809e2 ', '#060606', '#fd2f03',' #effa17 ',' #33fb2d ']
    this.state = {currentDeck: [' #ccc5c1 ', '  #f7791f  ', ' #575657 ', ' #03faf5 ',]}
  }

这是用这个函数更新的：

   changeDifficulty = (e) => {
    let newDeck = []
    let howManyCards = e.target.value // this decides difficulty level
    for (let i = 0; i < howManyCards; i++) {
      newDeck.push(this.allCards[i])
    }
    this.setState({currentDeck: newDeck}) 
  }

状态更新成功，但是下面的组件在第一次渲染后没有重新渲染：

<Game deck={this.state.currentDeck} />

因此屏幕上的卡片数量与默认设置保持一致。

如果我在设置状态之前console.log newDeck会显示如下，先点击Medium按钮后，再点击Hard之后。

Array(8) [ "#fca7f3 ", "white", " #6da740  ", "  #f6faba  ", " #ccc5c1 ", "  #f7791f  ", " #575657 ", " #03faf5 " ]
Array(12) [ "#fca7f3 ", "white", " #6da740  ", "  #f6faba  ", " #ccc5c1 ", "  #f7791f  ", " #575657 ", " #03faf5 ", " #13afdb ", " #7509e2 ", … ]

【问题讨论】：

我在这里看不到任何问题 - 可能值得在这里或 jsfiddle 创建一个可运行的 sn-p
另外，您可以使用slice - changeDifficulty = () => { this.setState({ currentDeck: this.allCards.slice(0, Number(e.target.value))})} 简化此操作。我更喜欢使用返回新数组的数组运算符，例如slice、map、filter 等，而不是依赖于创建的新数组并推送给它们，它保证你没有错过先创建一个新数组并想知道为什么状态没有更新
在我们说话的时候试图找出 jsfiddle。并感谢切片建议。

标签： javascript reactjs render setstate

【解决方案1】：

当你写这个时，你的数组引用没有更新，

 this.setState({currentDeck: newDeck})

由于引用未更新，因此反应渲染器不知道更新。您需要做的是创建一个新数组并将其推送到这样的状态，

 this.setState({currentDeck: [...newDeck]})

【讨论】：

它是...首先创建了一个新数组 - let newDeck = []
抱歉，我错过了那部分。在那种情况下，我看不出给定代码有任何问题。您可以在更新状态之前控制台记录 newDeck 并在帖子中添加更多相关代码吗？
@sabbir.alam 我刚刚添加了console.log，但它确实没有显示任何问题。即使我使用其他功能控制台记录状态，它也显示它已更新。它只是拒绝重新渲染组件