Question

每次单击后修改setState时如何更新reactjs jsx。在console.log中，它显示了最新的阵列，但是在视图中，它不会被更改。

Answer 1

̶L̶o̶o̶k̶s̶̶l̶i̶k̶e̶̶y̶o̶u̶r̶̶̶n̶e̶w̶A̶r̶r̶a̶y̶̶̶i̶s̶̶d̶e̶p̶e̶n̶d̶e̶n̶t̶̶o̶n̶̶y̶o̶u̶r̶̶̶c̶a̶r̶d̶A̶r̶r̶a̶y̶̶。

̶Y̶o̶u̶̶c̶a̶n̶̶u̶s̶e̶̶c̶a̶l̶l̶b̶a̶c̶k̶̶t̶o̶̶u̶p̶d̶a̶t̶e̶̶t̶h̶e̶̶s̶t̶a̶t̶e̶e̶p1b̶a̶s̶e̶

编辑：我再次查看了您的代码，发现您在渲染中使用̶s̶e̶t̶S̶t̶a̶t̶e̶并没有执行任何操作。您可以简单地对复制的̶c̶a̶r̶d̶A̶r̶r̶a̶y̶ ...进行排序，它位于渲染器中...

这是一个可行的示例：

newArray

cardArray

Answer 2

我相信您需要写：

    render() {
        return (
            <div>
                <button onClick={() => this.shuffleCard()}>Click</button>
                {this.state.cardArray.map((items, index) => (
                    return (<li className="card" key={index} onClick={() => this.checkCard(items, index)}>{items}</li>)
                ))}
            </div>
        )
}

Answer 3

似乎您实际上并没有更新annything。你有

cardArray: [...memoryCards, ...memoryCards]

只是以相同的方式重写数组。您的目标是什么？

Answer 4

通过复制并排序memoryCards然后setState更新cardArray。

shuffleCard() {
        let cardArray = [...this.state.memoryCards, ...this.state.memoryCards].sort(() => 
            0.5 - Math.random());
        this.setState({cardArray});
        console.log(cardArray);
 }

Answer 5

您从this.state.cardArray渲染卡，因此应在this.state.cardArray函数中更新shuffleCard：

shuffleCard() {
  this.setState({
    ...this.state,
    cardArray: [...this.state.memoryCards, ...this.state.memoryCards].sort(() => 0.5 - Math.random())
  });
}

如何刷新反应渲染

5 个答案: