Question

我看过以前的答案，但找不到解决方案。我所在的州包含一副“色卡”：

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，它会显示以下内容，首先是在单击“中”按钮之后，然后在“困难”之后。

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

Answer 1

在编写此代码时，您的数组引用未处于状态更新

 this.setState({currentDeck: newDeck})

由于未更新参考，因此反应渲染器不了解更新。您需要做的是创建一个新数组并将其推入这样的状态，

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

setState不重新呈现组件

1 个答案: